React：如何添加 HTMLElement？

Question

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

现在，我只是定义一个 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} />
  }
}

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

Answer 1

你需要使用angerlySetInnerHTML

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