React Native - renderRowのlistviewでカスタムコンポーネントの参照を取得する

Question

私はListViewを持っており、私がrenderRowで書いたカスタムコンポーネントのリファレンスにアクセスしようとしています。私はカスタムコンポーネントのいくつかの直接操作を行う必要があるので、これらのリファレンスを取得する必要があります。

他の人もこの問題に直面しているようです。私はReact Native: Refs in ListViewとhttps://github.com/facebook/react-native/issues/897の推奨に従ってみましたが、私にとってはうまくいかないようです。私は、提案されたコールバックrefメソッドを使用してみました。しかし、componentDidMountのthis.refs.listView.refsを印刷しようとすると、customRefを返す代わりに空になります。 renderRow関数からカスタムコンポーネントのリファレンスを取得するにはどうすればよいですか？

renderRow(rowData) { 
    return (
    //          \/ Missing execution of getRef 
    <CustomComponent ref={(ref)=>this.getRef} key={rowData.key} /> 
    ); 
}, 

第二に、REFコールバック関数は、実際に参照を保存するために持っている：あなたは、あなたのコード内の構文エラーを持って、

componentDidMount() { 
    console.log(this.refs.listView.refs); 
}, 

getRef() { 
    return 'customRef'; 
}, 

renderRow(rowData) { 
    return (
    <CustomComponent ref={(ref)=>this.getRef} key={rowData.key} /> 
    ); 
}, 

render() { 
    return (
     <ListView 
     ref={'listView'} 
     dataSource={this.state.dataSource} 
     renderRow={this.renderRow} /> 
    ); 
} 

Answer 1

ファースト：クラスは、次のような機能を持っているあなたに

ありがとうございましたthis.refs.listView.refsに電話をしたときに参照される場所です。この価値がどこから来ると思いますか？ Reactはこの種の魔法の児童書保管を許可していません、それは完全にマニュアルです。あなたはコールバックでこの特定のコンポーネントへの参照を取得し、あなたはそれをどうするのか把握しなければなりません。

constructor(props) { 
    super(props); 
    this.rowRefs = []; 
    this.storeRowRef = this.storeRowRef.bind(this); 
} 
componentDidMount() { 
    console.log(this.rowRefs.length); 
} 
storeRowRef(rowRef) { 
    this.rowRefs.push(rowRef); 
} 
renderRow(rowData) { 
    return (
    <CustomComponent ref={storeRowRef} key={rowData.key} /> 
    ); 
}, 
...