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>
    );
  }
}

子組件

componentDidMount生命周期中將this傳回去，這樣父組件就可以調用子組件的方法了

  componentDidMount() {
    this.props.onRef(this);//將this傳回去
    this.init();
  }

　　

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