在JSX中声明之前引用React Element

Question

我正在我的项目中实现react-native-zss-rich-text-editor，我遇到的问题是RichTextToolbar需要一个将ref返回RichTextEditor组件的函数。

如果我在RichTextToolbar之前订购RichTextEditor，它可以正常工作

<RichTextEditor
  ref={(r) => this.richtext = r}/>
<RichTextToolbar
    getEditor={() => this.richtext}/>

但我想首先渲染RichTextToolbar，然后再渲染引发异常的RichTextEditor

    <RichTextToolbar
        getEditor={() => this.richtext}/>  <-----
    <RichTextEditor
      ref={(r) => this.richtext = r}/>

Answer 1

试试这段代码：

<RichTextToolbar
    getEditor={() => this.richtext ? this.richtext : <div/>}/>
<RichTextEditor
  ref={(r) => this.richtext = r}/>

此解决方案与组件RichTextToolbar的要求兼容。如果div不好 - 请将其替换为其他内容。

根据你的评论试试这个：

{ this.richtext ?
  <RichTextToolbar
      getEditor={() => this.richtext}/>
  : null
}
<RichTextEditor
  ref={(r) => this.richtext = r}/>