反应DangerouslySetInnerHTML

Question

如何使用react将组件子组件呈现为Html，如果我设置了文本，它可以很好地工作，但是如果我设置了Html返回对象

    class App extends React.Component{
  render(){
    return(
      <div dangerouslySetInnerHTML={{__html: this.props.children}}>

      </div>
    )
  }
}

1) ReactDOM.render(
  <App> Test </App>,
 document.getElementById('root')); --- Works


2) ReactDOM.render(
  <App> <p>Test</p> </App>,
 document.getElementById('root')); --- return [object Object]

链接到JS Bin

Answer 1

正如我在注释中解释的那样，您在输出中获得了[object Object]，因为__html需要是一个字符串，但是要传递从<p>Test</p>创建的React组件。

我还不清楚你为什么要这么做，但是要做你想要做的事情，你需要传递一个字符串。

因此，您可以执行以下操作之一：

<App>{"<p>Test</p>"}</App>

或

<App children="<p>Test</p>" />

两者都是等价的，并将标记作为字符串传递，然后字符串将成为__html的值。

Note!

这将只适用于正常的HTML -不反应组件写在JSX！

例如，这将使而不是工作：

<App children="<Foo>Test</Foo>" />