1

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

1
  • Скорее всего никак. Без перерисовки родителя, дочерний не изменится. Возможно можно через useContext или redux, однако это зависит от конкретной ситуации, что где меняется и как это взаимосвязано.
    – SwaD
    12 фев в 21:37

1 ответ 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);
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.