如何在 react-native 中获取子组件的引用？答案

【问题标题】：How to get reference of child component in react-native?如何在 react-native 中获取子组件的引用？
【发布时间】：2016-06-08 14:14:24
【问题描述】：

我在react-native 应用程序中设置了一个ViewPager 组件，如下所示：

render(){
  return(
    <View>
       <ViewPager
         ref="main"
         dataSource={this.state.dataSource}
         renderPage={this.renderView}
       />
       <TouchableHighlight onPress={this._onPressButton}>
           <Text>Something</Text>
       </TouchableHighlight>     
    </View>  
  );
}

renderView(){
    return(
      <View ref="main1">
          <Text>Something else</Text>     
      </View>
    );
}

_onPressButton(){
    //Do something with {this.refs.main} and {this.refs.main1}
}

在函数_onPressButton 中，我可以使用this.refs.main 访问ViewPager 组件，但this.refs.main1 返回null。但我想通过引用main1 获得该视图的引用。我该怎么做？

【问题讨论】：

this.refs.main.main1 你可以试试
this.refs.main.refs.main1 应该可以工作。
不，this.refs.main.main1 和 this.refs.main.refs.main1 也给了null
尝试renderPage={this.renderView.bind(this)}并使用this.refs.main1
@NamanSogani 你找到解决方案了吗？我也面临同样的问题。

标签： android android-viewpager react-native

【解决方案1】：

在每个组件中将 refs 声明为回调：

ref={(ref) => { this.main = ref; }}
ref={(ref) => { this.main1 = ref; }}

然后像这样调用组件：

this.main.main1

【讨论】：