在 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>