JSX에서 선언하기 전에 React 요소를 참조하십시오

Question

내 프로젝트에 react-native-zss-rich-text-editor을 구현 중이며 RichTextToolbar에 RichTextEditor 구성 요소에 대한 참조를 반환하는 함수가 필요한 문제가 있습니다.

(가) RichTextToolbar이

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

잘 작동하지만 먼저 RichTextToolbar 다음

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

Answer 1

이 코드를 시도 예외를 던지는 RichTextEditor 렌더링 싶습니다 전에 내가 RichTextEditor는 주문 경우 :

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

이 솔루션은 p 그것을 구성 요소 RichTextToolbar의 요구 사항과 호환되는 것으로 변환하십시오. div이 좋지 않으면 다른 것으로 교체하십시오.

의견에 따라이 시도 :

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