React DangerouslySetInnerHTML

Question

如何使用 react dangerouslySetInnerHtml 将组件子项呈现为 Html，如果我设置文本它工作正常，但如果我设置 Html this return [object Object]

    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

React DangerouslySetInnerHTML

javascript

reactjs

react-dom