Обновление state другого дочернего компонента

Question

Обновление state другого дочернего компонента

Рейтинг: 1Ответов: 1Опубликовано: 13.02.2023

Как обновить состояние дочернего компонента из родительского, без ререндера самого родителя? У меня ситуация следующая: есть модальное окно, для его открытия использую state в самом родителе, далее через пропсы передаю его в компонент модального окна, в итоге родитель перерисовывается. Читал про useReducer, useMemo но так и не разобрался, так как много примеров на классах реакта, а я новенький)

javascript reactjs typescript state

Источник: Stack Overflow на русском

Answer 1

▲ 0

Я бы сделал так: Создал компонент "Модальное окно" таким образом:

ModalWindow.jsx

import { useState } from 'react';
import styles from './ModalWindow.module.css';

function ModalWindow({ children }) {
  const [isModal, setIsModal] = useState(false);

  return (
    <div>
      <button onClick={() => setIsModal((prev) => !prev)}>
        Open modal window
      </button>
      {isModal && (
        <div
          onClick={() => setIsModal((prev) => !prev)}
          className={styles['modal-window']}
        >
          {children}
        </div>
      )}
    </div>
  );
}

export default ModalWindow;

И добавил этот компонент в Родитель:

Parent.jsx

import ModalWindow from '../ModalWindow/ModalWindow';

function Parrent(){
  return (
    <h1>I'm a parrent!</h1>
    <ModalWindow>
      <h1>Hello, i'm a modal window!</h1>
    </ModalWindow>
  );
}

И css файл:

ModalWindow.module.css

.modal-window {
  display: grid;
  justify-content: center;
  align-content: center;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.5);
}

Обновление state другого дочернего компонента

Ответы