Tengo un Modelmenu que está anidado en el componente principal, implementa la función de abrir una ventana modal con un clic. También en este componente principal hay un componente secundario al que debe vincular la función de abrir una ventana modal con un elemento más. Puedo hacer esto si toda la lógica está en el componente principal, pero es una mala práctica, ya que tendré que duplicar el código en cada página de esta manera. ¿Cómo puedo hacer esto? Lo siento, soy bastante nuevo, no puedo entender la devolución de llamada.
Padre:
const Home: NextPage = () => { const handleCallback = (handleOpen: any) => { } return ( <> <ModalMenu parentCallback={handleCallback}/> <Slider handleCallback={handleCallback}/> </> ) }Modal:
export const ModalMenu: FC = (props) => { const [play, setPlay] = useState<boolean>(false) const handleOpen = () => { props.parentCallback(setPlay(!play)) }; const handleClose = () => { setPlay(false) setPlay(!play) }; return }Niño:
export const Slider: FC= (props) => { return ( <> <Image nClick={props.handleCallback}/> </>Si está buscando pasar valores y/o funciones de un padre a dos o más hijos, creo que es mejor tener solo los valores y funciones en el padre.
Padre:
const Home: NextPage = () => { const [play, setPlay] = useState<boolean>(false) const handleOpen = () => { setPlay(prev => !prev) }; const handleClose = () => { setPlay(false) setPlay(!play) }; return ( <> <ModalMenu handleOpen={handleOpen} handleClose={handleClose} play={play}/> <MainSlider <ModalMenu handleOpen={handleOpen} handleClose={handleClose} play={play}/> </> ) }si desea pasar una interfaz a los accesorios en los niños para mecanografiar, su interfaz se verá así
interface iProps { play : boolean; handleOpen : () => void; handleClose : () => void; } export const ModalMenu: FC = (props):iProps => { // you can easily access all you want const {handleClose, handleOpen, play} = props return } export const Slider: FC= (props): iProps => { const {handleClose, handleOpen, play} = props return ( <> <Image onClick={handleOpen}/> </>