呈现HTML符号

Question

我在React中创建了一个名为Symbol的组件，可以轻松地按名称渲染HTML符号，例如euro将呈现€(€)，sum将呈现∑(∑)。

问题是，如果我只呈现HTML代码，我会在屏幕上看到代码而不是符号。因此，我必须在一个span元素上使用dangerouslySetInnerHTML属性以HTML形式呈现它：

const SYMBOLS = {
  euro: '€',
  sum: '∑'
}

const Symbol = (props) => {
  const { entity } = props

  return <span dangerouslySetInnerHTML={{ __html: SYMBOLS[entity] }} />
}

export default Symbol

这个方法虽然有效，但在“不必要”的span内包装符号感觉有些不太妥当。所以，请问有没有人有想法在React中渲染HTML符号而又不使用额外的包装器呢？

- johannchopin

Answer 1

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

虽然它应该尽量避免使用, 但是避免使用原始 HTML 的方法是避免使用它。

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

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

像文件格式信息网这样的网站是识别正确的转义序列或获取可以复制/粘贴的字符的好来源。

- Quentin

---

啊哈，你说得对，为什么不直接返回符号，比如 € 或者 ∑。很明显，谢谢你启发我 ;) - johannchopin

Answer 2

你可以在JSX中显示符号，但是在代码中它并没有被正确解析。 你应该使用ReactHtmlParser包来解析JSX中的SYMBOL[entity]。 尝试安装这个包。

npm install "react-html-parser" --save

这是您的符号组件的完整代码

import React from 'react';
import ReactHtmlParser from "react-html-parser";
const SYMBOLS = {
    euro: '€',
    sum: '∑'
  }
  
const Symbol = (props) => {
    const { entity } = props;
    return (
       {ReactHtmlParser(SYMBOLS[entity])}
    );
}
  
export default Symbol;

使用符号代码

<Symbol entity="euro" />

- development-ninja

---

谢谢您的帮助，但是在您的示例中，符号仍然包含在 h1 中。 - johannchopin

哦耶！我们不必使用h1来包装。我更新了答案，现在它完全可用。你只需将符号字符串或原始代码粘贴到该对象中，然后ReactHtmlParser将完全解析它。 :) - development-ninja