react中父組件調用子組件的方法

react中父組件調用子組件的方法

最近項目中用到了react，須要在父組件中調用子組件的某個方法，那麼如何獲取到子組件的實例呢？ 這裏使用了回調，簡單實用，兼容低版本。

class Parent extends Component {

  componentDidMount() {
    ...
  }
  
  forceRefresh() {
    // 調用子組件的refresh()方法刷新。
    this.xxxChildView.refresh();
  }
  ...
  render() {
    return (
        <ChildView ref={(ref) => this.xxxChildView = ref} >
            ...
        </ChildView>
    );
}
複製代碼

子組件：

class ChildView extends Component {

  componentDidMount() {
    ...
  }
  
  // 對外提供的刷新方法
  refresh() {
    ...
  }
  ...
  render() {
    return (
        ...
    );
}
複製代碼

參考

一、react-cn.github.io/react/docs/…