reactjs - 为什么不能渲染这个？

Question

我正在构建一个 React Typescript 应用程序，并使用 CKEditor，一个方法给了我这个对象：

当我尝试渲染它时，它给了我这个错误：

有人可以向我解释我做错了什么吗？

这是代码：

export default class Toolbar extends React.Component<IProps, IState> {
  public toolbar: ToolbarView | undefined

  public componentDidMount() {
    this.toolbar = new ToolbarView()
    this.toolbar.render()
    console.log(this.toolbar.element) // the result is the first screenshot
  }

  public render() {
    return this.toolbar ? this.toolbar.element : null
  }
}

Answer 1

实际上，我能够使用ReactRef：

  public toolbarRef: React.RefObject<HTMLDivElement> = React.createRef()

  public componentDidMount() {
    // this.editor initialisation

    this.toolbar = new ToolbarView()
    // adding stuff to the toolbar
    this.toolbar.render()

    const el = ReactDOM.findDOMNode(this.toolbarRef.current as HTMLDivElement)
    if (el instanceof Element) {
      el.appendChild(this.toolbar.element)
    }
  }

  public render() {
    return (
        <div ref={this.toolbarRef} />
    )
  }