javascript - 如何让父组件知道所有子组件何时加载

Question

有没有办法让父组件知道所有子组件何时加载？我正在 React 应用程序中进行演练。游览步骤位于我的 Root.js 中，其中包含 App 组件，此 App 组件内是其他组件。某些页面/组件需要一段时间才能加载，但步骤会继续，所以我的问题是我正在使用的库( Shepherd.js )给出错误，指出我附加步骤的元素不存在。

为了“修复”这个问题，我添加了一个 beforeShowPromise ，它会在继续之前等待 2000 毫秒:

beforeShowPromise: function () {
  return new Promise(function (resolve) {
    setTimeout(function () {
      resolve();
    }, 2000);
  })
}, 

但是，当然，当某人的互联网连接很差时，2000 毫秒太快了，我会得到同样的错误。因此，我想创建某种函数来检查该步骤所附加的子组件是否已加载。如果它们已加载，请继续执行这些步骤。所以，我的问题是:有没有办法让父组件知道所有子组件何时加载？

Answer 1

React 会等待挂载所有子组件，然后再在父组件上调用 componentDidMount 。这意味着只有当所有子组件都已挂载/加载时，才会调用父组件的 componentDidMount 函数。您永远不应该依赖硬编码时间来确保应用程序已安装，只需使用生命周期方法中的构建即可。

  state = { mounted: false };

  componentDidMount() {
    this.setState({ mounted: true });
  }

或者如果你想使用钩子(Hook):

  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)
  }, [])