[英]What approach can I use to wait for all child callbacks to complete?
I'm trying to figure out an architecture to allow a parent component, to wait for all the child components to finish rendering and then do some work.我试图找出一种架构来允许父组件,等待所有子组件完成渲染,然后做一些工作。 Unfortunately in this case I need to do the rendering outside of React and it's done asynchronously instead.不幸的是,在这种情况下,我需要在 React 之外进行渲染,而是异步完成。
This makes things a little complex.这让事情变得有点复杂。 So in my example I want the doSomethingAfterRender()
function in the ParentComponent to be called once, after all the ChildComponent customRender
calls have completed.因此,在我的示例中,我希望在所有ChildComponent customRender
调用完成后,调用一次ParentComponent 中的doSomethingAfterRender()
函数。
I do have one potential solution, though it doesn't feel very clean which is to use a debounce on the doSomethingAfterRender()
function.我确实有一个潜在的解决方案,但感觉不是很干净,那就是在doSomethingAfterRender()
函数上使用去抖动。 I'd much rather use a more deterministic approach to only calling this function once if possible.如果可能的话,我更愿意使用更具确定性的方法只调用一次这个函数。
I'm wondering if anyone has a better suggestion for handling this?我想知道是否有人有更好的建议来处理这个问题?
ParentComponent.js父组件.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>
);
}
ChildComponent.js (this is actually a HoC) ChildComponent.js(这实际上是一个 HoC)
const withXYZ = (WrappedComponent) =>
({ doSomethingAfterRender, ...props }) => {
// I need to wait for this function to complete, on all child components
const doRender = useCallback(
async () => {
await customRender();
// Call the doSomething...
if (doSomethingAfterRender) {
doSomethingAfterRender();
}
},
[doSomethingAfterRender]
);
return (
<React.Fragment>
<... some DOM ...>
<WrappedComponent {...props} renderLoop={renderLoop} layer={layer} />
</React.Fragment>
);
};
App.js应用程序.js
const Child = withXYZ(CustomWrappedComponent);
const App = () => {
return {
<ParentComponent>
<Child />
<Child />
<Child />
</ParentComponent>
};
}
If I understood correctly.如果我理解正确的话。 I would do something like: useState with useRef.
我会做类似的事情: useState with useRef.
This way I would trigger only once the Parent and that is when all Child components have finished with their respective async tasks.这样我只会触发一次父级,也就是当所有子级组件完成各自的异步任务时。
Child.js儿童.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>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.