React Native — получить ссылки на пользовательские компоненты в списке из renderRow

У меня есть ListView, и я пытаюсь получить доступ к ссылкам пользовательских компонентов, которые я написал в renderRow. Мне нужно сделать некоторые прямые манипуляции с пользовательскими компонентами, поэтому мне нужно получить их ссылки.

Похоже, что другие люди тоже сталкивались с этой проблемой. Я попытался следовать рекомендациям в React Native: ссылки в ListView и https://github.com/facebook/react-native/issues/897, но они не кажется, не работает для меня. Я попытался использовать метод обратного вызова, как было предложено. Но когда я пытаюсь распечатать this.refs.listView.refs в componentDidMount, он оказывается пустым, а не возвращает customRef. Как получить ссылки на пользовательские компоненты из функции renderRow? Спасибо

Класс имеет следующие функции:

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

react-native ref react-native-listview
person llams48    schedule 08.07.2016    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Во-первых, у вас есть синтаксическая ошибка в вашем коде:

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

Во-вторых, функция обратного вызова ref должна где-то хранить ссылку, на которую можно будет сослаться при вызове 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} />
   );
},
...
person Adam Terlson    schedule 08.07.2016