React Native - erhalten Referenzen von benutzerdefinierten Komponenten in Listview von renderRow

Question

Ich habe eine ListView und versuche auf die Referenzen der benutzerdefinierten Komponenten, die ich in der renderRow geschrieben habe zuzugreifen. Ich muss die benutzerdefinierten Komponenten direkt manipulieren, also muss ich die Referenzen von diesen bekommen.

Es scheint, als ob andere Leute auch dieses Problem haben. Ich habe versucht, den Empfehlungen in React Native: Refs in ListView und https://github.com/facebook/react-native/issues/897 zu folgen, aber sie scheinen nicht für mich zu arbeiten. Ich habe versucht, die Callback Ref-Methode wie vorgeschlagen zu verwenden. Aber wenn ich versuche, this.refs.listView.refs in componentDidMount auszudrucken, ist es leer, anstatt customRef zurückzugeben. Wie bekomme ich die Refs der benutzerdefinierten Komponenten von der RenderRow-Funktion? Danke

Die Klasse hat die folgenden Funktionen:

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

Zuerst Sie einen syntaktischen Fehler im Code hast:

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

Zweitens, die ref Callback-Funktion hat, um tatsächlich die ref zu speichern irgendwo zu referenzieren, wenn Sie this.refs.listView.refs anrufen. Woher soll dieser Wert kommen? Reagieren lässt diese Art von magischem Kinderreflex-Speicher nicht zu, es ist komplett manuell. Sie erhalten einen Verweis auf diese bestimmte Komponente in Ihrem Rückruf, Sie müssen herausfinden, was damit zu tun ist.

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} /> 
    ); 
}, 
...