Reactjs 反应：如何添加HtmleElement？

我正在尝试将一个外部库包装到React组件中，该库返回一个HtmleElement对象

现在，我只是定义一个ref并像这样附加对象：

class MyComponent extends React.Component {
  constructor(props) {
    super(props)
    this.externalLibrary = new ExternalLibrary()
  }
  componentDidMount() {
    this.externalLibrary()
      .then(contents => this.div.appendChild(contents))
  }
  render() {
    <div ref={div => this.div = div} />
  }
}

类MyComponent扩展了React.Component{ 建造师（道具）{ 超级（道具） this.externalLibrary=newexternallibrary（） } componentDidMount（）{ 这个。外部图书馆（） .then（contents=>this.div.appendChild（contents）） } render（）{ this.div=div}/> } }

---

但是AFAIU意味着DOM的这一部分将不由React管理。添加HTMLElement的正确方法是什么？

您需要使用危险的LysetinerHTML

  componentDidMount() {
    let self= this;
    this.externalLibrary()
      .then(contents => self.setState({contents}))
  }
  render() {
    <div dangerouslySetInnerHTML={{__html: this.state.contents}} />
      }

componentDidMount（）{
让自我=这个；
这个。外部图书馆（）
.then（contents=>self.setState（{contents}））
}
render（）{
}

Hmm，这只是打印

[对象HTMLElement]

。它与

{this.state.contents.innerHTML}

一起工作，但这似乎与调用appendChild（）的作用相同，也就是说，React没有看到DOM的这一部分。请确保内容包含html文本，因为我不知道外部库的作用。外部库将自定义元素/WebComponent作为HtmleElement对象返回。我正在寻找一种方法，以React知道的方式将其添加到DOM中——类似于ReactDOM.render（contents，div），它不起作用，因为显然render（）是方法不接受HtmleElement对象。我不明白为什么DangerouslySetinerHTML不能工作？

DangerouslySetinerHTML

设置

innerHTML

，而不是子

HtmleElement

。问题是如何装载现有DOM元素（例如通过

document.createElement

创建），而不是如何设置React元素的

innerHTML

。