Как обновить состояние дочернего компонента из родительского, без ререндера самого родителя? У меня ситуация следующая: есть модальное окно, для его открытия использую state в самом родителе, далее через пропсы передаю его в компонент модального окна, в итоге родитель перерисовывается. Читал про useReducer, useMemo но так и не разобрался, так как много примеров на классах реакта, а я новенький)
1 ответ
Я бы сделал так: Создал компонент "Модальное окно" таким образом:
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);
}