Así que he estado pensando en esto por un tiempo, y me gustaría tener esto resuelto de una vez por todas. Si es posible, sería genial explicar por qué piensas que cualquier forma funciona. ¿Tiene sentido que un Modal administre su propio estado o esto debería ser administrado por su Padre? En el código a continuación, el primer Modal es tonto y está completamente administrado por su Padre. En el segundo Modal, puede ser administrado tanto por su Padre como por sí mismo.
import Button from "../components/button"; const Modal = (props: { onClose: () => void }) => { const { onClose } = props; return ( <> <div className="wrapper"> <p>Hello modal</p> <button onClick={() => onClose()}>Close</button> </div> </> ); }; const ModalWithState = (props: { active?: boolean; onClose: () => void }) => { const { active, onClose } = props; const [activeS, setActiveS] = useState(false); useEffect(() => { if (!active && !hasParentControl()) { setActiveS(true); return; } setActiveS(active); }, [active]); const hasParentControl = () => typeof active !== null; const onCloseModal = () => { setActiveS(false); onClose(); }; return ( <> {activeS && ( <div className="wrapper"> <p>Hello modal</p> <button onClick={() => onCloseModal()}>Close</button> <button onClick={() => setActiveS(true)}>Open</button> </div> )} </> ); }; const ParentComponent = () => { const [activeModal, setActiveModal] = useState(false); const openModal = () => setActiveModal(true); return ( <> {activeModal && <Modal onClose={() => setActiveModal(false)} />} <ModalWithState active onClose={() => setActiveModal(false)} /> <Button onClick={() => openModal()}>Open modal</Button> </> ); };No hay una respuesta correcta o incorrecta a esto. Puede implementar un modal en 1 de un millón de formas y depende completamente de su caso de uso.
En la mayoría de las situaciones, descubrí que los modales con estado tienden a ser más favorables para su reutilización, pero incluso eso es exagerado.
En su ejemplo, mantiene el estado activo dos veces, esto introduce más código y es más fácil cometer un error de esta manera. True para cualquier componente secundario.
Y dado que no puede evitar el estado principal, solo el padre sabe cuándo abrir el modal. Creo que deberías saltarte el estado del niño.
Habiendo dicho eso, siempre puede representar el componente modal y dejar que decida si representa su contenido mediante accesorios.
** hay formas de mantener el estado 'isOpen' solo en el elemento secundario, pero implica exponer una función en el elemento secundario y dejar que el padre la llame. Que es una especie de antipatrón para reaccionar