React DangerouslySetInnerHTML

【问题标题】：React DangerouslySetInnerHTMLReact DangerouslySetInnerHTML
【发布时间】：2017-11-07 23:01:47
【问题描述】：

如何将组件子级呈现为 Html 并做出危险的反应 SetInnerHtml，如果我设置文本它工作正常，但如果我设置 Html 这返回 [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

【问题讨论】：

这不起作用，因为__html 的值需要是一个字符串，但你传递的是一个对象，更具体地说是一个 React 组件...
... 但是你为什么要使用dangerouslySetInnerHtml 呢？我看不出你想在这里实现什么。
这只是我需要在我的项目中使用 dangerouslySetInnerHtml 的示例，还有其他想法如何解决这个问题？

标签： javascript reactjs react-dom

【解决方案1】：

正如我在 cmets 中解释的那样，您在输出中得到了 [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>" />

【讨论】：