文章目录[隐藏]

问题

render() {
  const html_string = "<span>123</span>";
  return (
    <div>
    <p>React 好多坑</p>
    {html_string}
    </div>
  );
}

React 因为防止 xss 就会把标签给转义掉, 所以页面就会只显示<span>123</span>,因为是转义后的,所以并不会按原来的渲染。

解决

<div
  style={{display: 'inline-block'}} 
  dangerouslySetInnerHTML={{__html: html_string}}
</div>

tips

这样 html_string 的里面的 class 不要转化成 className。

这个 dangerouslySetInnerHTML 的用法,内部不能有元素,不然 React 会报错。

但是这样加 div 的话 我用 div 来包括住它,虽然写了下 display,但是还是不能保证其在任何情况下都和没 div 一样。

这样是防止了 React 去转义 HTML 字符串,但这只是一种不太好的解决方案。

思考

其实我把 HTML 放在变量里, 也是无奈之举。

因为这个 HTML 会根据别的变量变化,有可能是个 a 标签,有可能是个 span 标签。

所以就这样做,其实最好的方案还是把这个变量里的元素单独放出来作为一个标签,这样即使在这个单独的 component 里写几个 if else 还是不会太乱。

参考链接

https://facebook.github.io/react/docs/dom-elements.html#dangerouslysetinnerhtml