Necesito pasar un objeto Imagen desde la página hasta un componente que llama a un componente para cada imagen.
Home() -> ThreePanel() -> Panel()
Desde mi comprensión de los accesorios, esto debería ser posible con el paso de accesorios de ThreePanel a Panel.
Pero hay un error:
Error del servidor Error: Falta la propiedad "src" requerida en la imagen. Asegúrese de pasar "src" en props al componente
next/image. Recibido: {"altura":"170em"}
Esta es la fuente del error. Necesito especificar un objeto específico. Pero como plantilla, me gustaría usar una variable.
<Image src={props.cardData.icon} // <-- Doesn't let me specify generic variable height="170em"/> <Image src={props.cardData.icon.firstImage} height="170em"/>Estoy usando Siguiente JS.
Aquí está el código completo a continuación:
import ThreePanel from '../components/threePanel' import firstImage from '../public/images/one.png' import secondImage from '../public/images/two.png' import thirdImage from '../public/images/three.png' export default function Home() { return ( <ThreePanel panelOne = {{ icon: {firstImage}, name: "First" }} panelTwo = {{ icon: {secondImage}, content: "Second" }} panelThree = {{ icon: {thirdImage}, content: "Third" }}> </ThreePanel> ) } import Panel from '../components/panel' export default function ThreePanel(props) { return ( <Grid container> <Grid item> <Panel cardData={props.firstImage.icon}></Panel> </Grid> <Grid item> <Panel cardData={props.secondImage.icon}></Panel> </Grid> <Grid item> <Panel cardData={props.thirdImage.icon}></Panel> </Grid> </Grid> ) } import Image from 'next/image' export default function Panel(props) { return ( <Image src={props.cardData} // <-- Doesn't let me specify generic variable height="170em"/> ) } props.firstImage.icon no está definido en el componente ThreePanel ya que la imagen se pasó como panelOne={{ icon: {firstImage}, name: "First" }} . Esto significa que el componente secundario necesitaría acceder a props.panelOne.icon.firstImage para llegar a la imagen. Esto puede funcionar si a cada componente Panel se le pasa la propiedad anidada correctamente.
<Panel cardData={props.panelOne.icon.firstImage} /> <Panel cardData={props.panelTwo.icon.secondImage} /> ...etc...Como puede ver, cada panel secundario necesita saber qué panel es, pero también necesita saber cómo se nombró la propiedad de la imagen. Esto no es ideal.
Debe esforzarse por pasar accesorios con nombres consistentes a niños "repetidos", ya que cada "instancia" no sabrá a qué accesorio dinámico debe acceder. En este caso, es el valor pasado el que es dinámico, no la clave prop.
Hogar
Pase los valores de la imagen dinámica en un accesorio estándar, como icon .
import firstImage from '../public/images/one.png'; import secondImage from '../public/images/two.png'; import thirdImage from '../public/images/three.png'; export default function Home() { return ( <ThreePanel panelOne={{ icon: firstImage, name: "First" }} panelTwo={{ icon: secondImage, content: "Second" }} panelThree={{ icon: thirdImage, content: "Third" }} /> ) }trespanel
Acceda al accesorio de panel "dinámico" para pasar el objeto de accesorio de panel específico a cada componente Panel . Ahora, el componente intermedio ThreePanel no necesita saber mucho de los valores anidados más profundos, sabe pasar 1 de 3 objetos de utilería de panel a sus 3 paneles secundarios.
export default function ThreePanel(props) { return ( <Grid container> <Grid item> <Panel cardData={props.panelOne} /> </Grid> <Grid item> <Panel cardData={props.panelTwo} /> </Grid> <Grid item> <Panel cardData={props.panelThree} /> </Grid> </Grid> ) }Panel
Ahora, la propiedad carData pasada será la imagen específica que se pasó del componente abuelo/ancestro. Observe aquí que cada panel individual no sabe cuál de los 3 paneles es, pero sabe que tiene un ícono de imagen para acceder.
export default function Panel(props) { return ( <Image src={props.cardData.icon} height="170em" /> ) }En threePanel.js, los accesorios del panel deberían ser cardData=props.panelOne, ¿no es así? En lugar de props.cardOne