在 React 中危险设置 Inner html 中添加图标

Question

我正在尝试使用危险设置的内部 html 在字符串文本之间添加一个图标，而 div 标签正在工作，但箭头图标向右（来自 material 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>

在 React 中危险设置 Inner html 中添加图标

Add Icon in dangerously set Inner html in React

reactjs

dangerouslysetinnerhtml