agenda - React Native: obtenga referencias de componentes personalizados en la vista de lista de renderRow

react native list

Question

Tengo un ListView y estoy tratando de acceder a los refs de componentes personalizados que he escrito en el renderRow. Necesito hacer una manipulación directa de los componentes personalizados, así que necesito obtener los refs de estos.

Parece que otras personas se han enfrentado a este problema también. Intenté seguir las recomendaciones en React Native: Refs en ListView y https://github.com/facebook/react-native/issues/897 pero no parecen funcionar para mí. He intentado usar el método de devolución de llamada refinado como se sugiere. Pero cuando intento imprimir this.refs.listView.refs en componentDidMount, está vacío en lugar de devolver customRef. ¿Cómo obtengo los refs de los componentes personalizados de la función renderRow? Gracias

La clase tiene las siguientes funciones:

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

Primero, tienes un error sintáctico en tu código:

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

En segundo lugar, la función de devolución de llamada de ref debe almacenar realmente la referencia en algún lugar para hacer referencia cuando se llama a this.refs.listView.refs . ¿De dónde esperas que venga este valor? Reaccionar no permite este tipo de almacenamiento mágico ref niño, es totalmente manual. Obtienes una referencia a este componente en particular en tu devolución de llamada, debes averiguar qué hacer con él.

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