Question

假设我有3层组件：

甲
- 乙
  - C
  - d
- 电子

假设我想转到/ a / b / c。 B需要来自API的某些数据，而C需要来自API的不同数据。

我希望在B处显示加载图标，但是在删除B处的加载图标之前，还要同时加载来自B和C的数据（通过Promise.all([bLoad,cLoad])）。

- A - B -> Loading Icon/ waiting on bLoad to resolve - C -> no loading icon/ waiting on cLoad to resolve

如果我渲染加载图标代替B的子项，则C永远不会被加载以加载其数据。

我的问题的第二部分出现在我想从/ a / b / c - ＆gt; / A / B / d。在这种情况下，B已经安装，所以我希望加载图标出现在D的位置，直到D结算。如果我要从/ a / b / d - >＆gt; / a / e我希望它能代替E出现。

我尝试解决它的方法是将任何“可加载”组件包装在<Loading />包装器中，并使用一个prop waitFor，它接受一个返回promise的函数。 <Loading />组件理想地呈现，将其waitFor承诺推送到商店，然后显示加载图标（如果它是第一个要加载的）。一旦所有组件都已呈现并且所有waitFor都在商店中，它将在Promise.all()上运行waitFor，并且当它解析后将呈现所有组件。

Component B:
<Loading waitFor=() => promiseB() >
  if (loading) {
    <LoadingIcon />
    return;
  } 
  [C]
</Loading>

Component C:
<Loading waitFor=() => promiseC() >
   if (loading) {
     <LoadingIcon />
     return;
   } 
   [C]
</Loading>

问题是，如果我在第一个而不是孩子上显示加载图标，则孩子永远不会触发。

我对这个问题的其他解决方案持开放态度，但目标是只加载整个“视图”所需的数据，并在所有需要渲染的内容上显示加载图标，直到它和所有孩子组件具有所需的数据。基本上我希望它像Heroku的网络应用程序一样运作。

提前致谢！

ReactJS加载嵌套组件的图标

0 个答案: