如何使用html字符串渲染react元素?

Der*_*rek 19 javascript reactjs

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

目前{this.props.html_string}给我一个文本节点.如何将其设为HTML DOM节点?

Sna*_*ger 34

你想要的是什么 dangerouslySetInnerHTML

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

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

编辑:你想要htmlencode字符串.

  • 你说的htmlencode是什么意思?你能扩展一下你的例子吗?我对清理 html 感兴趣。谢谢 (2认同)

Kos*_*ika 5

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

  • `React.renderToString()` 现已弃用,现在使用 `ReactDOMServer.renderToString()` (`import ReactDOMServer from 'react-dom/server'`) (9认同)