React：如何添加HTMLElement？

Question

我正在尝试在React组件中包装一个返回HTMLElement对象的外部库。

现在，我只是定义一个引用并附加这样的对象：

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} />
  }
}

但是AFAIU意味着DOM的那部分不会被React管理。添加HTMLElement的正确方法是什么？

Answer 1

您需要使用 dangerouslySetInnerHTML

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