使用嵌套 state 克隆 React JSX 元素

Question

我遇到了一些問題。 我有很重的具有多種狀態的 JSX 元素。 在應用程序的另一部分，我需要將此元素傳遞給模態 window 並保持所有狀態。 解決此問題的最佳解決方案是什么？ 當然，我可以將所有狀態設為 Parent 並將其傳遞給 Child。 但也許可以凍結所有狀態並將 JSX Element 作為獨立組件傳遞？

結構將如下所示：

ParentElement
|_
   AnotherElement
|_
   SomeHeavyElement

父元素：

const ParentElement= () => {
       return (
              <React.Fragment>
                  <AnotherElement />
                  <SomeHeavyElement />
              </React.Fragment>
       );
};
export default ParentElement;

另一個元素：

const AnotherElement= () => {
       return (
              <React.Fragment>
                  <dialog>
                      <SomeHeavyElement/>
                  </dialog>
              </React.Fragment>
       );
};
export default AnotherElement;

一些重元素

const SomeHeavyElement= () => {
       const [state1, setState1] = useState(true);
       ...
       const [state99, setState99] = useState(false);

       return (
              <React.Fragment>
                 {/*some logic*/}
              </React.Fragment>
       );
};
export default SomeHeavyElement;

Answer 1

您必須將 state 向上提起，這意味着您應該在兩個組件的頂部（在<ParentElement>中）定義 state。 您不能真正凍結您的組件內部 state。

這是一個最小的例子：

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來集中您的組件 state。 此外，如果您想避免道具鑽孔，您可以使用 React API 上下文定義處理您的 state。