如何使用 html 字符串呈现反应元素？ [复制]答案

【问题标题】：How to render a react element using an html string? [duplicate]如何使用 html 字符串呈现反应元素？ [复制]
【发布时间】：2015-06-24 18:07:11
【问题描述】：

var Klass = React.createClass({
  this.props.html_string = '<button>BUTTON_TEXT</button>';
  render: function(){
    return (
      <div className="wrapper">
        {this.props.html_string}
      </div>
    );
  }
});

目前{this.props.html_string} 给了我一个文本节点。我怎样才能使它成为一个 HTML DOM 节点？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

你想要的是dangerouslySetInnerHTML

https://facebook.github.io/react/tips/dangerously-set-inner-html.html

function createMarkup() { return {__html: 'First &middot; Second'}; };
<div dangerouslySetInnerHTML={createMarkup()} />

编辑：您需要对字符串进行 htmlencode。

【讨论】：

htmlencode 是什么意思？你能扩展你的例子吗？我对清理 html 很感兴趣。谢谢
我的意思是在必要时使用 html 实体，例如 >和 <而不是 > 和

【解决方案2】：

还要注意可以在服务器上使用的React.renderToString('html') - https://facebook.github.io/react/docs/top-level-api.html

【讨论】：

React.renderToString() 现已弃用，现在使用 ReactDOMServer.renderToString() (import ReactDOMServer from 'react-dom/server')