如何使用 html 字符串渲染反应元素？

Question

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 节点？

Answer 1

你要的是dangerouslySetInnerHTML

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

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

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

Answer 2

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

如何使用 html 字符串渲染反应元素？

How to render a react element using an html string?

javascript

reactjs