Question

考虑这个反应代码：

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

要显示的其他API的topic.name输出Environment & Forest值。

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

Answer 1

您可以使用浏览器的原生解析器，如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);

你正在做的是使用DOMParser创建一个HTMLDocument，方法是将我们的字符串附加到'<!doctype html><body>'的末尾进行解码。然后，我们可以在新创建的HTMLDocument主体的textContent中访问字符串的解码值。

Answer 2

如果您可以控制创建主题，则可以使用dangerouslySetInnerHTML

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

您应该知道使用innerHTML可以打开您的跨站点脚本（XSS）攻击，因此明智地使用它。

Answer 3

const getDecodedString = (str) => {
    const txt = document.createElement('textarea');
    txt.innerHTML = str;
    return txt.value;
};

HTML特殊字符（＆amp;符号）无法在React组件中呈现

3 个答案: