在React/Next.js中如何将Image对象作为props逐层传递给子组件？

根因分析 #

1. props属性名不匹配：Home组件传递给ThreePanel的参数名为panelOne、panelTwo、panelThree，但ThreePanel中取值时错误写为props.firstImage、props.secondImage、props.thirdImage，导致无法正确拿到传入的图片资源
2. 图片对象多余嵌套：Home中给icon赋值时使用了{firstImage}对象简写语法，等价于icon: {firstImage: 导入的图片资源}，icon本身是嵌套了图片的对象，而非直接的图片资源，导致Panel组件拿到的cardData无法直接作为src属性的值

修改步骤 #

1. 调整Home.js的参数传递 #

去掉icon赋值时多余的对象包裹，直接赋值为导入的图片变量：

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>
  )
}

2. 修正threePanel.js的参数取值 #

对应Home传递的属性名调整取值逻辑：

import Panel from '../components/panel'

export default function ThreePanel(props) {
  return (
    <Grid container>
        <Grid item>
          <Panel cardData={props.panelOne.icon}></Panel>
        </Grid>
        <Grid item>
          <Panel cardData={props.panelTwo.icon}></Panel>
        </Grid>
        <Grid item>
          <Panel cardData={props.panelThree.icon}></Panel>
        </Grid>
    </Grid>
  )
}

3. 补充panel.js的必填属性 #

原有通用赋值逻辑已经可以正常运行，补充next/image要求的必填alt属性即可：

import Image from 'next/image'

export default function Panel(props) {
  return (
    <Image src={props.cardData}
           height="170em"
           alt="面板图标"/>
  )
}

可选兼容方案 #

如果业务需要保留icon的嵌套对象结构，不需要修改上层传参，直接在Panel组件中统一取对象的第一个属性值作为src即可：

import Image from 'next/image'

export default function Panel(props) {
  // 自动提取icon对象中的图片资源
  const imgSrc = Object.values(props.cardData)[0]
  return (
    <Image src={imgSrc}
           height="170em"
           alt="面板图标"/>
  )
}

内容的提问来源于stack exchange，提问作者engineer-x