如何在没有JSX的情况下在React.js中呈现html实体

Question

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

打印'×' 而不是×

我能够通过使用来修复它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