javascript - 呈现 HTML 符号

Question

我在 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 符号吗？

Answer 1

dangerouslySetInnerHTML 是在 React 中处理原始 HTML 的标准方式。

应该避免，但这样做的方法是避免使用原始 HTML。

键入 € 或使用 JavaScript 转义序列:"\u20AC"

const SYMBOLS = {
  euro: "\u20AC",
  sum: '∑'
}

像 File Format Info 这样的网站是识别正确转义序列或获取可以复制/粘贴的字符的良好来源。