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

您尝试从组件外部的访问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>

Answer 2

对于您要解决的问题，有一个更惯用的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})}
    />
  )
}

儿童参考undefined反应原生

2 个答案: