HTML特殊字符(和符号)不在React组件中呈现

Question

HTML特殊字符(和符号)不在React组件中呈现

考虑这个反应代码:

subTopicOptions = curSubTopics.map((topic) => {
    return (
        <option value={topic.id}>{topic.name}</option>
    )
});

Run Code Online (Sandbox Code Playgroud)

要从rest API显示的topic.name输出Environment & Forest值.

如何Environment & Forest在选择字段中显示？

Answer 1

Kyl*_*son 8

您可以使用浏览器的本机解析器，如Decode & back to & in JavaScript的最佳答案中所述。

使用DOMParser api，您可以执行以下操作：

const strToDecode = 'Environment &amp; Forest';
const parser = new DOMParser();
const decodedString = parser.parseFromString(`<!doctype html><body>${strToDecode}`, 'text/html').body.textContent;
console.log(decodedString);

Run Code Online (Sandbox Code Playgroud)

您在那里所做的是使用DOMParser来创建 HTMLDocument，方法是将要解码的字符串附加到'<!doctype html><body>'. 然后，我们可以访问textContent新创建的 HTMLDocument 正文中字符串的解码值。

所有这些代码都显示＆符号？React 在做什么？ (3认同)
https://shripadk.github.io/react/docs/jsx-gotchas.html 使用 ``` <divangerlySetInnerHTML={{__html: topic.name}} /> ``` (2认同)

Answer 2

Den*_*lka 6

如果创建主题在您的控制之下，您可以使用angerouslySetInnerHTML

subTopicOptions = curSubTopics.map((topic) => {
    return (
        <option value={topic.id} dangerouslySetInnerHTML={{__html: topic.name }} />
    )
});

Run Code Online (Sandbox Code Playgroud)

您应该注意，使用innerHTML 可能会让您遭受跨站点脚本（XSS）攻击，因此请明智地使用它。

归档时间：	8 年，2 月前
查看次数：	4286 次
最近记录：	8 年，2 月前