我遇到了一些问题。我有一个很重的JSX元素,有多个状态。在应用程序的另一部分,我需要将这个元素传递到模式窗口,并保持所有的状态。解决这个问题的最佳方案是什么?当然,我可以制作一个具有所有状态的父元素,然后将其传递给子元素。但也许可以冻结所有状态,然后将JSF元素作为独立的组件传递?
结构会是这样的
ParentElement
|_
AnotherElement
|_
SomeHeavyElement
ParentElement:
const ParentElement= () => {
return (
<React.Fragment>
<AnotherElement />
<SomeHeavyElement />
</React.Fragment>
);
};
export default ParentElement;
AnotherElement: SomeHeavyElement:
const AnotherElement= () => {
return (
<React.Fragment>
<dialog>
<SomeHeavyElement/>
</dialog>
</React.Fragment>
);
};
export default AnotherElement;
SomeHeavyElement
const SomeHeavyElement= () => {
const [state1, setState1] = useState(true);
...
const [state99, setState99] = useState(false);
return (
<React.Fragment>
{/*some logic*/}
</React.Fragment>
);
};
export default SomeHeavyElement;
你必须 抬高,这意味着你应该在这两个组件之上定义你的状态(在 <ParentElement>
). 你不能真正冻结你的组件内部状态。
这里是一个最小的例子。
const ParentElement= () => {
const [state1, setState1] = useState(true);
// ...
const [state99, setState99] = useState(false);
return (
<React.Fragment>
<AnotherElement state={{state1, state99}} />
<SomeHeavyElement state={{state1, state99}} />
</React.Fragment>
);
};
export default ParentElement;
const SomeHeavyElement= ({state}) => {
return (
<React.Fragment>
{/*some logic*/}
</React.Fragment>
);
};
export default SomeHeavyElement;
const AnotherElement= ({state}) => {
return (
<React.Fragment>
<dialog>
<SomeHeavyElement state={state} />
</dialog>
</React.Fragment>
);
};
export default AnotherElement;
另外,当你有很多的 useState
定义,你可以 useReducer
来集中处理你的组件状态。另外,如果你想避免道具钻井,你可以使用React API上下文定义处理你的状态。