Tengo que construir un componente de pantalla de menú que se pueda usar más adelante fácilmente. El componente solo tiene opciones en forma de lista.
const options = [ { text: 'Option 1', }, { text: 'Option 2', }, { text: 'Option 3', }, ];y simplemente lo mapeo dentro del componente.
const Menu = () => { return ( <div> {options.map((option, index) => ( <MenuOption text={option.text} index={index} /> ))} </div> ); }; const MenuOption = ({ text, index }) => { return ( <div> <p>{text}</p> </div> ); };Entonces cualquiera puede usar este componente de menú pasando los datos de opciones. Lo que quiero es que este componente también ejecute funciones correspondientes a la opción en la que se hizo clic. Por lo tanto, podemos pasar fácilmente la función que debe ejecutarse como accesorio al componente. La pregunta principal es cómo relaciono/asigno las opciones con la función correspondiente.
NOTA: No puedo enviar las funciones con el objeto de datos de opciones en los accesorios.
Quiero decir que solo puede enviar una devolución de llamada al componente Menu :
const Menu = ({ onOptionClick }) => { return ( <div> {options.map((option, index) => ( <MenuOption text={option.text} index={index} onClick={onOptionClick} /> ))} </div> ); }; const MenuOption = ({ text, index, onClick }) => { return ( <div onClick={() => { onClick(index, text, whatever) }}> <p>{text}</p> </div> ); };