Клонировать элемент React JSX с вложенным состоянием - PullRequest
Новая
       128

Клонировать элемент React JSX с вложенным состоянием

0 голосов
/ 08 мая 2020

Я столкнулся с проблемой. У меня тяжелый элемент JSX с несколькими состояниями. В другой части приложения мне нужно передать этот элемент в модальное окно с сохранением всех состояний. Как лучше всего решить эту проблему? Конечно, я могу сделать Parent со всеми состояниями и передать его Child. Но, может быть, можно заморозить все состояния и передать JSX Element как независимый компонент?

Структура будет выглядеть так: 

ParentElement
|_
   AnotherElement
|_
   SomeHeavyElement

ParentElement: 

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

AnotherElement: 

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;

1 Ответ

1 голос
/ 08 мая 2020

Вы должны поднять состояние , то есть вы должны определить свое состояние поверх обоих компонентов (в <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.

...