reactjs - 在 React 的危险设置的内部 html 中添加图标

Question

我试图在 div 标签工作时使用危险设置的内部 html 在字符串文本之间添加一个图标，但右箭头图标（来自材料 ui）不起作用。还注意到在呈现实际 html 时它会变成小写。

这是我的代码之一，strPath 是“World->Americas->Latin America and the Caribbean”

let keyArray = Object.keys(selectedRegionsLocal);
    let listUI = [];
    for (let i = 0; i < keyArray.length; i++) {
        let strPath = selectedRegionsLocal[keyArray[i]].path;
        const pieces = strPath.split("->");
        let result = pieces.join(" <ArrowRightIcon></ArrowRightIcon> ")
        let fresult = '<div>' + result + '</div>';
        console.log('result ', fresult);
        listUI.push(
            <Grid dangerouslySetInnerHTML={{ __html: fresult }} />
        )
    }
    return listUI;

这就是我在开发工具中得到的 - >元素部分

实际价值的形象

我该怎么做才能把上面的实际值变成这个

Answer 1

您可以简单地在每个项目上放置一个图标：

假设你keyArray是这样的：

const keyArray = ["World", "Americas", "South", "America"];

现在，您可以使用map函数为每个项目添加一个图标：

const result = data.map((item, i) => (
  <div key={i}>
    <ArrowRightIcon />
    <span>{item}</span>
  </div>
));

现在，result可以使用了，带有父级div和flex样式，最终结果将产生：

<div style={{ display: "flex" }}>{result}</div>