儿童参考未定义反应原生

Question

我围绕 ViewPagerAndroid（简化版）创建了一个组件包装器

class TabView extends Component {

    constructor(props){
        super(props)
        this.state = { position: 0 }
    }

    changePage = (key) => { 
        this._pagerRef.setPage(key)
        this.setState({position: key})
    }

    render(){
        return(
            <ViewPagerAndroid ref={(ref) => this._pagerRef = ref}>
                 { this.props.scenes }
            </ViewPagerAndroid>
        )
    }
}

我想从组件外部触发changePage（例如从：<TabView ref={(ref) => this._ref = ref} />，然后运行this._ref.changePage(key)）。

但是，每次我尝试这样做时，this._pagerRef 在 TabView 的 changePage 函数中是未定义的。

我错过了什么？

Answer 1

对于您要解决的问题，有一个更惯用的 React 解决方案——即将 TabView 设置为 controlled component 并在 componentDidUpdate 上设置 ViewPager 页面：

class TabView extends Component {
  componentDidUpdate = ({ page }) => {
    // call setPage if page has changed
    if (page !== this.props.page && this._pagerRef) {
      this._pagerRef.setPage(page);
    }
  };

  render() {
    return (
      <ViewPagerAndroid
        initialPage={this.props.page}
        ref={ref => this._pagerRef = ref}
        onPageSelected={e => this.props.pageChanged(e.nativeEvent.position)}
      >
        {this.props.scenes}
      </ViewPagerAndroid>
    );
  }
}

然后，您可以将当前页面跟踪移动到父组件的状态，并将其作为道具传递给TabView，以及在值更改时更新它的处理程序：

render() {
  return (
    <TabView 
      page={this.state.page} 
      pageChanged={page => this.setState({page})}
    />
  )
}

Answer 2

您正试图从没有实例的组件外部访问ref。

因此，您需要将其作为prop 从父组件本身传递。您还需要将changePage 移动到父组件才能从外部访问它。

家长

 changePage = (key) => {   //... Call the function here
    this._pagerRef.setPage(key)
    this.setState({position: key})
}

 accessRef (ref) {
     this._pagerRef = ref .  //... Bind the ref here
 } 

 <TabView passRef={this.accessRef} /> //...Pass the ref here

儿童

<ViewPagerAndroid ref={this.props.passRef}> . // ... Set the ref here
                 { this.props.scenes }
            </ViewPagerAndroid>