如何在子组件就绪后通知父类组件？附已尝试方案

我在index.js中渲染主组件：

export default function Home() {
  return (
    <Main/>
  )
}

其中Main组件定义如下：

import React from "react";
export default class Main extends Child {

  constructor(props) {
    super(props);
  }

  async componentDidMount() {
    if (this.state.ready) {
      console.log('Parent ready'); // 未被调用！
    } else {
      console.log('Parent mounted'); // 正常调用
    }
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.ready != this.state.ready) {
      console.log('Parent updated'); // 未被调用！
    }
  }

  render() {
    return (
      <div>
        <Child/>
      </div>
    )
  }
}

Child组件定义如下：

export default class Child extends React.Component {

  constructor(props) {
    super(props);
    this.state = {ready: false};
  }

  async componentDidMount() {
    if (!this.state.ready) {
      // 此处加载动态库...
      // ...之后将状态设为就绪
      this.setState({ready: true});
    }
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.ready != this.state.ready) {
      console.log('Child ready'); // 已被调用
    }
  }

  render() {
    if (this.state.ready) {
      return (
        <div>Loaded.</div>
      )
    } else {
      return (
        <div>Loading...</div>
      )
    }
  }
}

运行后控制台输出：

Parent mounted
Child ready

我的问题是：父组件始终无法收到子组件就绪状态的通知，componentDidMount和componentDidUpdate均未触发。如何通知父组件子组件已就绪，以便执行特定操作？

我已尝试以下方案：

• 在index.js中用ref="child"引用Main组件，尝试从子实例调用父组件，但报错：Function components cannot have string refs. We recommend using useRef() instead
• 以不同方式从Child类调用super()（比如手动调用Hook）
• 尝试使用const mainRef = useRef();或this.mainRef = useRef();，但均失败，报错：Error: Invalid hook call

是否有更简便的解决方法？

最简便且符合React设计规范的方式是通过Props传递回调函数实现子组件向父组件的状态通知，同时先修正代码中的关键错误：Main组件不应该继承Child，而应继承React.Component，这是导致父组件状态生命周期异常的核心原因之一。

步骤1：修正并修改Main组件 #

import React from "react";
import Child from './Child'; // 确保引入路径正确

export default class Main extends React.Component {
  constructor(props) {
    super(props);
    this.state = { childReady: false };
    // 绑定回调函数的this指向
    this.handleChildReady = this.handleChildReady.bind(this);
  }

  async componentDidMount() {
    console.log('Parent mounted');
  }

  // 定义接收子组件就绪通知的回调函数
  handleChildReady() {
    this.setState({ childReady: true }, () => {
      // 状态更新完成后执行父组件的就绪操作
      console.log('Parent ready');
    });
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.childReady !== this.state.childReady) {
      console.log('Parent updated');
    }
  }

  render() {
    return (
      <div>
        {/* 将回调函数通过props传递给子组件 */}
        <Child onChildReady={this.handleChildReady} />
      </div>
    )
  }
}

步骤2：修改Child组件，触发父组件回调 #

import React from "react";

export default class Child extends React.Component {
  constructor(props) {
    super(props);
    this.state = { ready: false };
  }

  async componentDidMount() {
    if (!this.state.ready) {
      // 模拟动态库加载的异步操作
      await new Promise(resolve => setTimeout(resolve, 1000));
      // 更新状态后调用父组件传递的回调
      this.setState({ ready: true }, () => {
        this.props.onChildReady?.();
      });
    }
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.ready !== this.state.ready) {
      console.log('Child ready');
    }
  }

  render() {
    return this.state.ready ? <div>Loaded.</div> : <div>Loading...</div>;
  }
}

运行效果 #

修改后控制台输出将变为：

Parent mounted
Child ready
Parent ready
Parent updated

方案说明 #

• Props回调是React父子组件通信的标准方式，无需依赖复杂的实例引用（如ref），代码更清晰、易维护。
• 修正Main组件的继承关系后，父组件的状态生命周期才能正常工作。
• 使用可选链操作符?.()避免了回调未传递时的报错，增强代码健壮性。

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