react-父组件调用子组件的方法

版本 react@17.0.2 ,所以不能使用ref

父组件

export class VenProductListTabs extends React.Component<any> {
  constructor(props) {
    super(props);
    this.state = {refreshFlag: true};
    this.change=this.change.bind(this)
    this.onRef=this.onRef.bind(this)
  }
  onRef = (ref) => {
    this.child = ref
}
change(index){

  this.child.refresh()

}

  render() {
    return (
      <Tabs onTabChange={this.change} >
  
        <Tab title="按照存货维护供应商">
          <ProductMaintainVendor onRef={this.onRef} />
        </Tab>
        <Tab title="按照供应商维护存货">
        <VendorMaintainProduct onRef={this.onRef} />
        </Tab>
    
      </Tabs>
    );
  }
}

View Code

子组件

componentDidMount生命周期中将this传回去，这样父组件就可以调用子组件的方法了

componentDidMount() {
    this.props.onRef(this);//将this传回去
    this.init();
  }

public refresh() {
    this.presenter.refresh()//子组件自己的方法