React前端如何将含HTML列表标签的服务名渲染为下拉选项内的项目符号

架构老林

2026-8-8

React下拉选项中渲染HTML列表格式的服务名

需求背景

后端返回的服务数据里，部分service_name字段包含完整HTML列表标签（如<ul><li>Trip planning</li><li>Host shop</li></ul>），需要在React实现的下拉选项内，把这类内容渲染成带项目符号的列表，替代之前用正则将标签替换成|的处理逻辑。

解决方案

核心是用React的dangerouslySetInnerHTML属性直接渲染HTML字符串，同时保留普通文本的直接渲染逻辑，具体修改如下：

1. 移除无用的正则处理逻辑

删掉原handleServiceName函数里的标签替换代码，不需要再把HTML标签换成|。

2. 修改下拉选项渲染代码

{pricing &&
  targetValue &&
  pricing.map((service, index) => {
    if (targetValue === service.service_info.service_name) {
      const hasHtmlList = service.service_info.service_name.includes('<li>');
      return (
        <Grid item key={index} className={classes.headlineText}>
          {hasHtmlList ? (
            <div dangerouslySetInnerHTML={{ __html: service.service_info.service_name }} />
          ) : (
            service.service_info.service_name
          )}
        </Grid>
      );
    }
    return null;
  })}

关键说明

dangerouslySetInnerHTML是React官方提供的用于直接渲染HTML内容的属性，传入的对象中__html字段对应要渲染的HTML字符串。
保留判断service_name是否包含<li>标签的逻辑，以此区分需要渲染为列表的内容和普通文本内容。
给循环渲染的Grid组件添加key属性，符合React列表渲染规范，避免控制台警告。