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

Question

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

这是我的代码，其中 strPath 是“世界->美洲->拉丁美洲和加勒比地区”

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>