React中使用dangerouslySetInnerHTML插入Material UI右箭头图标失效问题

dangerouslySetInnerHTML仅支持插入原生HTML字符串，而ArrowRightIcon是Material UI封装的React组件，不属于原生HTML标签范畴。你将组件名拼入HTML字符串的写法不会触发React的组件渲染逻辑，浏览器解析未知自定义标签时会自动将标签名转为小写，因此无法正常渲染图标。

不要使用dangerouslySetInnerHTML处理该场景，直接遍历分割后的路径片段，穿插拼接文本节点和图标组件即可，参考代码如下：

import ArrowRightIcon from '@mui/icons-material/ArrowRight';

// 原有逻辑修改为
const keyArray = Object.keys(selectedRegionsLocal);
const listUI = [];
for (let i = 0; i < keyArray.length; i++) {
  const strPath = selectedRegionsLocal[keyArray[i]].path;
  const pieces = strPath.split("->");
  const pathNodes = [];

  pieces.forEach((piece, index) => {
    pathNodes.push(<span key={`text-${index}`}>{piece}</span>);
    // 最后一个路径片段后不需要添加箭头
    if (index !== pieces.length - 1) {
      // sx属性可自定义图标大小、边距、对齐方式
      pathNodes.push(<ArrowRightIcon key={`icon-${index}`} sx={{ verticalAlign: 'middle', mx: 0.5, fontSize: '1rem' }} />);
    }
  });

  listUI.push(
    <Grid key={keyArray[i]}>
      <div>{pathNodes}</div>
    </Grid>
  );
}
return listUI;

该写法同时规避了滥用dangerouslySetInnerHTML带来的XSS安全风险，也可以灵活调整图标样式适配排版需求。

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