如何在React父组件中调用子组件的实例方法？

嘿，这个问题我太熟了！把回调函数从父组件传给子组件确实没啥难度，但反过来让父组件调用子组件的实例方法，就得用点React的小技巧了。针对你给出的代码，咱们可以用refs来实现这个需求，具体修改后的代码和思路如下：

实现方案：使用React.createRef() #

class Parent extends React.Component {
  constructor(props) {
    super(props);
    // 创建一个ref对象，用来存储子组件的实例引用
    this.childRef = React.createRef();
  }

  // 示例：在组件挂载完成后调用子组件方法
  componentDidMount() {
    this.invokeChildBarMethod();
  }

  invokeChildBarMethod = () => {
    // 通过ref的current属性获取子组件实例，直接调用bar方法
    this.childRef.current.bar();
  };

  render() {
    // 将创建好的ref绑定到子组件上
    return <Child ref={this.childRef} />;
  }
}

class Child extends React.Component {
  constructor(props) {
    super(props);
    this.bar = () => console.log('foo');
  }
}

关键说明 #

• React.createRef()会创建一个特殊的对象，当把它绑定到子组件的ref属性上时，React会自动将子组件的实例赋值给这个对象的current属性。
• 这种方式仅适用于类组件，如果你的子组件是函数组件，需要结合forwardRef和useImperativeHandle来实现类似的功能。
• 小提醒：除非是实在找不到更优的方案，否则尽量避免直接调用子组件的方法——这会打破React的单向数据流原则，让组件间的耦合度变高。优先考虑通过状态提升、props回调这类更符合React设计理念的方式来实现交互。

内容的提问来源于stack exchange，提问作者tys