Javascript 我可以使用什么方法来等待所有子回调完成？

我试图找出一种体系结构，允许父组件等待所有子组件完成渲染，然后执行一些工作。不幸的是，在这种情况下，我需要在React之外进行渲染，而它是异步完成的

这使得事情有点复杂。因此，在我的示例中，我希望在所有ChildComponent

customRender

调用完成后，ParentComponent中的

DoSoSomethingAfterRender（）

函数调用一次

我确实有一个潜在的解决方案，尽管感觉不是很干净，那就是在

doSomethingAfterRender（）函数上使用去盎司。如果可能的话，我宁愿使用一种更确定的方法，只调用这个函数一次

我想知道是否有人有更好的建议来处理这个问题

ParentComponent.js

const Parent = (props) => {

    // This is the function I need to call
    const doSomethingAfterRender = useCallback(
        async (params) => {          
             await doSomething();             
        },
    );

    // Extend the child components to provide the doSomethingAfterRender callback down
    const childrenWithProps = React.Children.map(props.children, (child) => {
        if (React.isValidElement(child)) {
            return React.cloneElement(child, { doSomethingAfterRender });
        }

        return child;
    });

    return (
        <React.Fragment>
            <...someDOM....>
            {childrenWithProps}
        </React.Fragment>
    );
   
}

const Child = withXYZ(CustomWrappedComponent);

const App = () => {
   return {
      <ParentComponent>
         <Child />
         <Child />
         <Child />
      </ParentComponent>
   };
}

const Parent=（道具）=>{
//这是我需要调用的函数
const doSomethingAfterRender=useCallback(
异步（参数）=>{
等待做某事（）；
},
);
//扩展子组件以向下提供doSomethingAfterRender回调
const childrenWithProps=React.Children.map（props.Children，（child）=>{
if（React.isValidElement（子项））{
返回React.cloneElement（子级，{doSomethingAfterRender}）；
}
返回儿童；
});
返回(
{childrenWithProps}
);
}

ChildComponent.js（这实际上是一个HoC）

const with xyz=（WrappedComponent）=>
（{doSomethingAfterRender，…props}）=>{
//我需要等待此函数在所有子组件上完成
const doRender=useCallback(
异步（）=>{
等待customRender（）；
//称之为doSomething。。。
如果（doSomethingAfterRender）{
doSomethingAfterRender（）；
}
},
[doSomethingAfterRender]
);
返回(
);
};

App.js

const Parent = (props) => {

    // This is the function I need to call
    const doSomethingAfterRender = useCallback(
        async (params) => {          
             await doSomething();             
        },
    );

    // Extend the child components to provide the doSomethingAfterRender callback down
    const childrenWithProps = React.Children.map(props.children, (child) => {
        if (React.isValidElement(child)) {
            return React.cloneElement(child, { doSomethingAfterRender });
        }

        return child;
    });

    return (
        <React.Fragment>
            <...someDOM....>
            {childrenWithProps}
        </React.Fragment>
    );
   
}

const Child = withXYZ(CustomWrappedComponent);

const App = () => {
   return {
      <ParentComponent>
         <Child />
         <Child />
         <Child />
      </ParentComponent>
   };
}

const Child=withXYZ（CustomWrappedComponent）；
常量应用=（）=>{
返回{
};
}
如果我理解正确。我会这样做：
useState with useRef。
这样，我将只触发父组件一次，即当所有子组件完成各自的异步任务时触发

Child.js

const child = ({ childRef, updateParent }) => {
  const [text, setText] = useState("Not Set");
   useEffect(() => {
    if (typeof childRef.current !== "boolean") {
      const display = (childRef.current += 1);
      setTimeout(() => {
        setText(`Child Now ${display}`);
          if (childRef.current === 2) {
          updateParent(true);
          childRef.current = false;
        }
      }, 3000);
    }
  }, []);

  return (
    <>
      <div>Test {text}</div>
    </>
  );
}

const Parent = ()=>{
  const childRef = useRef(0);
  const [shouldUpdate, setShouldUpdate] = useState(false);

  useEffect(() => {
    if (shouldUpdate) {
      console.log("updating");
    }
  }, [shouldUpdate]);

  return (
    <div className="App">
      {childRef.current}
      <Child childRef={childRef} updateParent={setShouldUpdate} />
      <Child childRef={childRef} updateParent={setShouldUpdate} />
      <Child childRef={childRef} updateParent={setShouldUpdate} />
    </div>
  );
}

constchild=（{childRef，updateParent}）=>{
const[text，setText]=useState（“未设置”）；
useffect（（）=>{
if（当前childRef.current的类型！=“布尔”）{
常量显示=（childRef.current+=1）；
设置超时（（）=>{
setText（`Child Now${display}`）；
如果（childRef.current==2）{
updateParent（true）；
childRef.current=false；
}
}, 3000);
}
}, []);
返回(
测试{text}
);
}
常量父项=（）=>{
const childRef=useRef（0）；
const[shouldUpdate，setShouldUpdate]=useState（false）；
useffect（（）=>{
如果（应该更新）{
控制台日志（“更新”）；
}
}，[应更新]；
返回(
{childRef.current}
);
}
这是否可行：在父级中维护已启动的子组件数量计数器和已完成的子组件数量计数。在每个子回调之后，将completed count增加1，并检查started\u count==completed\u count。如果started_count==completed count，则调用doSomethingAfterRender（），让子组件返回一个。保存你所有的承诺，然后你就可以在你的parent@CatchAsCatchCan我该如何确切地归还？因为功能组件需要返回JSX？这正是我想要的那种理想for@Ian我添加了一个“如何”选项。