有什么方法可以在调用React.createElement时避免文本子代的HTML转义? [英] Is there some way to avoid HTML escaping of text children when calling React.createElement?

问题描述

请考虑以下对React.createElement的调用:

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

这将导致React逃避>和<.有什么方法可以避免此文本被转义?

This will cause React to escape > and <. Is there some way to avoid this text being escaped?

推荐答案

您可以使用 dangerouslySetInnerHTML

You can use dangerouslySetInnerHTML

const Component = () => (
   <span dangerouslySetInnerHTML={{ __html: '&gt;&lt;' }} />
);
 
ReactDOM.render(
   <Component />, 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"></div>

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

or use Unicode codes instead of HTML special characters

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

ReactDOM.render(
  <Component />, 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"></div>

这篇关于有什么方法可以在调用React.createElement时避免文本子代的HTML转义?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！