3

我有一个 ListView 并试图访问我在 renderRow 中编写的自定义组件的引用。我需要对自定义组件进行一些直接操作，因此我需要获取这些组件的引用。

似乎其他人也面临过这个问题。我已经尝试遵循React Native 中的建议：ListView中的参考和https://github.com/facebook/react-native/issues/897但它们似乎对我不起作用。我已尝试按照建议使用回调 ref 方法。但是，当我尝试在 componentDidMount 中打印出 this.refs.listView.refs 时，它是空的，而不是返回 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} />
   );
}
4

1 回答 1

3

首先，您的代码中有一个语法错误：

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

其次， ref 回调函数必须将 ref 实际存储在某个地方，以便在您调用this.refs.listView.refs. 你期望这个值来自哪里？React 不允许这种神奇的子 ref 存储，它完全是手动的。你在回调中获得了这个特定组件的引用，你必须弄清楚如何处理它。

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} />
   );
},
...
于 2016-07-08T06:41:49.393 回答