react中如何渲染html代码

开发中遇到一个问题，就是用户输入可多个空格后，在页面上只会显示为一个空格，想到的解决办法就是利用 去replace空格，让其可以正常渲染，如下：

var result=value.replace(/\s/g," ");

经过替换后发现页面上并不能直接渲染 ，经过一番搜索发现react的 dangerouslySetInnerHTML ，可以解析并渲染html代码。

用法如下：

如果想让div元素中的内容： '<h3>hello world</h3>'正常渲染

<div dangerouslySetInnerHTML={{__html: '<h3>hahhah</h3>'}}></div>

注意 dangerouslySetInnerHTML 中必须是一个对象，更直观的例子如下：

function createMarkup() {
  return {__html: 'First     Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()}></div>;
}

相关资料及官方文档：

点我跳转或者点我跳转

转载于:https://www.cnblogs.com/li-you/p/7727845.html