Reactコンポーネントを再レンダリングするときにネイティブrefが未定義です

Question

React Nativeのrefsに問題があります。これは私のコードの簡易版である：私は私が期待通りにログを参照してください、そしてMyActionButton押すと

class Main extends React.Component { 

    constructor(props) { 
     ... 
     this.refs = {}; 
    } 

    render() { 
     if(this.state.page=="index") { 
      return(
       <View> 
        <FlatList ref={flatlist => this.refs.flatlist = flatlist}> ... </FlatList> 
        <MyActionButton flatlist={this.refs.flatlist}/> 
       </View> 
      ) 

     } else if (this.state.page="text"=){ 
      return(
       <Text> ... </Text> 
      ) 
     } 
    } 
} 


class MyActionButton extends React.Component { 
    render(
     return(
      <ActionButton> 
       <ActionButtonItem onPress={() => { 
        console.log("AB props", this.props) 
       }} /> 
      </ActionButton> 
     ) 
    ) 
} 

アプリがthis.state.page =「インデックス」で始まるので、物事が動作するように見える：

私は「テキスト」にstate.pageを変更して、私はMyActionButtonを押すと、再び、私が取得戻って「インデックス」に来た場合

'AB props', {flatlist: {A LOT OF STUFF HERE}} 

は、しかし：

'AB props', {flatlist: undefined} 

その小道具が未定義の取得なぜ私はわかりませんどのようにポイントを作るためにそれを修正する実際のFlatListに追加します。

Answer 1

私はあまり好きではありませんが、私はそれは、あなたが参照コールバックの代わりに、文字列、参考文献を使用する必要がありゲッターfuncionすべての

class Main extends React.Component { 

    constructor(props) { 
     ... 
     this.refs = {}; 
    } 

    getFlatList() { 
     return this.refs.flatlist; 
    } 

    render() { 
     if(this.state.page=="index") { 
      return(
       <View> 
        <FlatList ref={flatlist => this.refs.flatlist = flatlist}> ... </FlatList> 
        <MyActionButton flatlist={this.getFlatList.bind(this)}/> 
       </View> 
      ) 

     } else if (this.state.page="text"=){ 
      return(
       <Text> ... </Text> 
      ) 
     } 
    } 
}