Como prefacio, estoy trabajando en esto para una pasantía en una base de código muy grande en la que no soy responsable de realizar cambios de diseño. Si fuera por mí, buscaría una mejor manera de lograr esto, pero no es así. Así que les pido que no sugieran que cambie toda la implementación a menos que lo que pido sea completamente imposible.
Tengo un objeto que se ve algo como:
const object = { option1: { url: "...", icon: <Icon1 /> }, option2: { url: "...", icon: <Icon2 /> } }En la interfaz de usuario, se representa de la siguiente manera:
{ Object.keys(object).map(( option, idx ) => { return ( <Component> { option.icon } </Component> ) }) } Estoy buscando una forma de pasar accesorios a la option.icon ? Los iconos son diferentes. es posible?
option.icon es el resultado de llamar a <Icon> . Debe pasarles accesorios cuando escriba el JSX.
Es esencialmente lo mismo que:
option1: { url: "...", icon: Icon1() }, … y luego decidir que desea pasar argumentos a Icon1() más adelante. No puede cuando solo tiene el valor de retorno para trabajar.
Si desea pasar los accesorios más tarde, debe asignar el componente a option.icon en su lugar para que pueda escribir el JSX en el momento en que desea pasar los accesorios.
const object = { option1: { url: "...", icon: Icon1 }, option2: { url: "...", icon: Icon2 } } { Object.values(object).map(( option, idx ) => { const IconComponent = option.icon; return ( <Component> <IconComponent propName={propValue} /> </Component> ) }) }