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

Posted 2023-03-16

【中文标题】在 React 的危险设置的内部 html 中添加图标

【英文标题】：Add Icon in dangerously set Inner html in React

【发布时间】：2021-12-22 19:20:43

【问题描述】：

我试图在 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;

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

实际价值图片

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

【问题讨论】：

使用 dangerouslySetInnerHTML 你可以注入 html 而不是 React 组件，<ArrowRightIcon> 看起来像一个反应组件。尝试使用 html

【参考方案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>