reactjs - react : How to add 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}} />
      }