如何不使用dangerouslySetInnerHTML为字符串数组指定索引内容设置特殊样式

完全可以不用dangerouslySetInnerHTML实现该需求，直接使用React原生的列表渲染逻辑即可实现，没有XSS风险，实现成本也很低。

实现建议 #

首先建议你调整boldIndexes的取值逻辑，直接存储需要加粗的项的索引而非实际内容，避免出现数组内存在重复内容时误匹配的问题，调整后上层组件的传值逻辑改为：

// 原来的逻辑
// const boldIndexes = [titleArr[1], titleArr[3]];
// 调整为存索引，更稳妥
const boldIndexes = [1, 3];

组件实现代码 #

实现第一种渲染结构（所有内容包裹在同一个父标题标签内，穿插加粗标签）

import { StyledComponentTitle, StyledComponentBoldTitle } from './你的样式文件路径';

const TitleComponent = ({ titleArr, boldIndexes }) => {
  // 先过滤掉数组中的null、空值等无效项
  const validArr = titleArr.filter(Boolean);
  // 转成Set提升查找效率，数组长度短的话可以省略这步
  const boldIndexSet = new Set(boldIndexes);

  return (
    <StyledComponentTitle>
      {validArr.map((content, idx) => 
        boldIndexSet.has(idx) 
          ? <StyledComponentBoldTitle key={idx}>{content}</StyledComponentBoldTitle>
          : <span key={idx}>{content}</span>
      )}
    </StyledComponentTitle>
  );
};

实现第二种渲染结构（每一项独立用对应标签包裹）

import { StyledComponentTitle, StyledComponentBoldTitle } from './你的样式文件路径';

const TitleComponent = ({ titleArr, boldIndexes }) => {
  const validArr = titleArr.filter(Boolean);
  const boldIndexSet = new Set(boldIndexes);

  return (
    <>
      {validArr.map((content, idx) => 
        boldIndexSet.has(idx) 
          ? <StyledComponentBoldTitle key={idx}>{content}</StyledComponentBoldTitle>
          : <StyledComponentTitle key={idx}>{content}</StyledComponentTitle>
      )}
    </>
  );
};

如果你不想调整原有的boldIndexes存内容的逻辑，只需要把上述代码中的判断条件从boldIndexSet.has(idx)改成boldIndexes.includes(content)即可正常使用。

内容的提问来源于stack exchange，提问作者mcclosa