Question

我如何使用reactlylylyInfrenHtml将Component子元素渲染为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]

Link to JS Bin

Answer 1

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

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

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

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

或

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

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

注意！

这只适用于普通的HTML - 而不是用JSX编写的React组件！

例如，这将不工作：

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

React DangerouslySetInnerHTML

1 个答案: