考虑以下React代码：
subTopicOptions = curSubTopics.map((topic) => {
return (
<option value={topic.id}>{topic.name}</option>
)
});
通过rest API获取topic.name输出Environment & Forest的值以显示。
如何在选择框中显示Environment & Forest？
React组件中无法呈现HTML特殊字符(&符号)
19
- Shah Alom
2
3个回答
9
您可以使用浏览器的原生解析器，如顶部答案所述，将JavaScript中的&解码回&。
使用DOMParser api，您可以执行以下操作：
const strToDecode = 'Environment & 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 的 body 的 textContent 中访问我们字符串的解码值。- Kyle Richardson
3
3为了显示一个“&”符号，需要使用这些代码？React在做什么？ - Jhourlad Estrella
真的！！！我想要显示右箭头。我只是写了
<a href="#" className="btn-text">Learn more →</a>。**→** - Faizan Mubasher2https://shripadk.github.io/react/docs/jsx-gotchas.html
use
- jojomango6
如果创建主题是在您的控制范围内，您可以使用dangerouslySetInnerHTML。
subTopicOptions = curSubTopics.map((topic) => {
return (
<option value={topic.id} dangerouslySetInnerHTML={{__html: topic.name }} />
)
});
您需要注意，使用innerHTML可能会使您面临跨站脚本攻击（XSS），因此请明智地使用它。
- Denis Rybalka
1
const getDecodedString = (str) => {
const txt = document.createElement('textarea');
txt.innerHTML = str;
return txt.value;
};
- Dmitryi Iarovatyi
1
欢迎来到SO。回答问题时，请解释您提供的代码如何回答该问题。当回答一个已有其他答案的旧问题时，最好解释为什么您的答案与其他人不同或更好。 - rmlockerd
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
DOMParser的方法的 代码沙盒。 - Kyle Richardson