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

IT技术 html reactjs html-escape-characters
2021-04-01 05:17:15

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

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

这将导致 React 转义>和<. 有没有办法避免这个文本被转义？

1个回答

您可以使用 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 codesHTML 特殊字符代替

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>

当需要使用<pre>彩色代码打印 html 标题时工作正常，reactjs 去除换行符。
2021-06-12 05:17:15
其它你可能感兴趣的问题
上一篇NEXT JS - 如何删除查询参数？ 下一篇输入字段的部分密码屏蔽