我在 React 中创建了一个 Symbol
组件来轻松呈现 HTML Symbols像 euro
这样的名字将呈现 €
(€) 或 sum
呈现 ∑
(∑).
问题是,如果我只渲染 HTML 代码,我将在屏幕上看到代码而不是符号。所以我不得不使用 dangerouslySetInnerHTML prop 在 span
元素上以将其呈现为 HTML:
const SYMBOLS = {
euro: '€',
sum: '∑'
}
const Symbol = (props) => {
const { entity } = props
return <span dangerouslySetInnerHTML={{ __html: SYMBOLS[entity] }} />
}
export default Symbol
这工作正常,但将符号包装在“不必要的”span
中感觉不对。那么有人知道如何在不使用额外包装器的情况下在 React 中呈现 HTML 符号吗?
最佳答案
dangerouslySetInnerHTML
是在 React 中处理原始 HTML 的标准方式。
应该避免,但这样做的方法是避免使用原始 HTML。
键入 €
或使用 JavaScript 转义序列:"\u20AC"
const SYMBOLS = {
euro: "\u20AC",
sum: '∑'
}
像 File Format Info 这样的网站是识别正确转义序列或获取可以复制/粘贴的字符的良好来源。
关于javascript - 呈现 HTML 符号,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64818262/