Ascii/HTML 字符代码在 React 变量中不起作用

Question

我有一个复选标记的 ascii/html 代码：✔

✔

如果我去，作为反应：

<div>&#10004;</div>

那么它的工作原理。但如果我去

var str = '✔';
<div>{str}</div>

它没有。它显示为✔

有任何想法吗？

✔

<div>&#10004;</div>

Answer 1

通过查看实际渲染的内容，很容易看出这里发生了什么：

const checkmark = '𘚤';

ReactDOM.render(<div id="x">{checkmark}</div>,
  document.getElementById('container'));

console.log(document.getElementById('x').innerHTML);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><div id="container"/>

如您所见，React 转义其输出，替换&为&，正如预期的那样。

最简单且正确的解决方案是转储 HTML 实体并直接使用该字符：

class Hello extends React.Component {
  render() {
    var checkmark = '?';
    return <div>Hello {checkmark}</div>;
  }
}

ReactDOM.render(<Hello />, document.getElementById('container'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><div id="container"/>

只要您的页面编码正确声明为 UTF-8，这将适用于所有浏览器。