如何让父组件知道所有子组件何时加载答案

【问题标题】：How to let a parent component know when all the child component are loaded如何让父组件知道所有子组件何时加载
【发布时间】：2019-11-22 08:43:35
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

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

  state = { mounted: false };

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

或者如果你想使用钩子：

  const [mounted, setMounted] = useState(false)

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

【讨论】：