有没有办法在调用React.createElement时避免HTML转义文本子项？

Question

考虑以下对React.createElement的调用：

React.createElement('span', null, null, ['><',])

这会导致React逃脱>和<。有没有办法避免这个文本被转义？

Answer 1

您可以使用dangerouslySetInnerHTML

＆＃13;

＆＃13;

const Component = () => (
   <span dangerouslySetInnerHTML={{ __html: '&gt;&lt;' }} />
);
 
ReactDOM.render(
   <Component />, document.getElementById('container')
);

＆＃13;

<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"></div>

＆＃13;

＆＃13;

＆＃13;

或使用Unicode codes代替HTML特殊字符

＆＃13;

＆＃13;

const Component = () => (
  <span>{'\u003E\u003C'}</span>
);

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

＆＃13;

<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"></div>

＆＃13;

＆＃13;

＆＃13;