克隆具有嵌套状态的 React JSX 元素答案

【问题标题】：Clone React JSX Element with nested state克隆具有嵌套状态的 React JSX 元素
【发布时间】：2020-05-08 14:30:35
【问题描述】：

我遇到了一些问题。我有很重的具有多种状态的 JSX 元素。在应用程序的另一部分，我需要将此元素传递给模态窗口并保持所有状态。解决此问题的最佳解决方案是什么？当然，我可以将所有状态设为 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;

【问题讨论】：

标签： javascript reactjs typescript clone next.js

【解决方案1】：

你必须lift state up，这意味着你应该在两个组件之上定义你的状态（在<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 来集中您的组件状态。另外，如果你想避免 props 钻取，你可以使用 React API 上下文定义处理你的状态。

【讨论】：