如何在 React 中将 Image 对象作为 props 传递？

Question

我需要将一个图像对象从页面传递到一个组件，该组件为每个图像调用一个组件。

Home() -> ThreePanel() -> Panel()

根据我对道具的理解，这应该可以通过将道具从 ThreePanel 传递到面板来实现。

但是出现错误：

Server Error Error: Image is missing required "src" property. Make sure you pass "src" in props to the next/image component. Received: {"height":"170em"}

这就是错误的来源。我需要指定一个特定的对象。但是作为模板，我想使用一个变量。

<Image src={props.cardData.icon} // <-- Doesn't let me specify generic variable 
           height="170em"/>

<Image src={props.cardData.icon.firstImage}
           height="170em"/>

我正在使用 Next JS。

完整代码如下：

Home.js

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

threePanel.js

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

panel.js

import Image from 'next/image'

export default function Panel(props) {
  return (
    <Image src={props.cardData} // <-- Doesn't let me specify generic variable 
           height="170em"/>
  )
}

Answer 1

在threePanel.js面板道具应该是cardData=props.panelOne，不是吗？而不是 props.cardOne

Answer 2

问题

props.firstImage.icon 未在 ThreePanel 组件中定义，因为图像作为 panelOne={{ icon: {firstImage}, name: "First" }} 传递。这意味着 child 组件需要访问 props.panelOne.icon.firstImage 才能访问图像。如果每个 Panel 组件都传递给正确嵌套的属性。

，则此可能起作用

<Panel cardData={props.panelOne.icon.firstImage} />
<Panel cardData={props.panelTwo.icon.secondImage} />
...etc...

如您所见，每个 child 面板都需要知道它是哪个面板，还需要知道图像属性的名称。这并不理想。

解决方案

您应该努力将一致命名的道具传递给“重复”children，因为每个“实例”都不知道他们应该访问哪个动态道具。在这种情况下，传递的值是动态的，而不是 prop 键。

首页

在标准道具上传递动态图像值，例如 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" }}
    />
  )
}

三面板

访问“动态”面板属性以将特定面板属性 object 传递给每个 Panel 组件。现在中间 ThreePanel 组件不需要知道很多更深层的嵌套值，它知道将 3 个面板中的 1 个属性 objects 传递给它的 3 个面板 children.

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

面板

现在传递的 carData 属性将是从 grandparent/ancestor 组件传递的特定图像。请注意，每个单独的面板都不知道它是 3 个面板中的哪一个，但它知道它有一个图像图标属性可以访问。

export default function Panel(props) {
  return (
    <Image
      src={props.cardData.icon}
      height="170em"
    />
  )
}

如何在 React 中将 Image 对象作为 props 传递？

How to pass Image object as props in React?

javascript

reactjs

next.js

react-props

Home.js

threePanel.js

panel.js

问题

解决方案