在 JSX 中声明之前引用 React 元素

Question

我正在我的项目中实施 react-native-zss-rich-text-editor，但遇到一个问题，即 RichTextToolbar 需要一个 returns 对 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}/>

Reference a React Element before its declared in JSX