如何在 React 中渲染一个 html 实体.js没有 JSX

Question

ReactDOM.render(
  React.createElement(
    "button",
    {"type": "button", "className": "close"},
    "×"),
  document.getElementById('container')
);

打印"& times;"而不是×

我能够通过使用dangerouslySetInnerHTML修复它，但顾名思义，我认为危险不是最好的解决方案

ReactDOM.render(
  React.createElement(
    "button",
    {"type": "button", "className": "close", "dangerouslySetInnerHTML" : {__html: "×"}},
    null),
  document.getElementById('container')
);

您可以在此处找到最后一个片段：

https://jsfiddle.net/pzb3ygxj/

Answer 1

您可以使用转义的 unicode 代码点：

ReactDOM.render(
  React.createElement(
    "button",
    {"type": "button", "className": "close"},
    "u00D7"),
  document.getElementById('container')
);

您甚至可以只使用文字字符：

ReactDOM.render(
  React.createElement(
    "button",
    {"type": "button", "className": "close"},
    "×"),
  document.getElementById('container')
);

字符串中的 HTML 实体由 React 转义。

这里有一些文档：

https://facebook.github.io/react/docs/jsx-in-depth.html#string-literals