为什么我不能渲染这个?

时间:2018-05-29 13:38:29

标签: reactjs typescript dom ckeditor5

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

enter image description here

当我尝试渲染它时,它给了我这个错误:

enter image description here

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

以下是代码:

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

1 个答案:

答案 0 :(得分:0)

实际上,我能够使用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} />
    )
  }