Javascript 如何在React.JS中将图像作为道具进行动态传递？

我在组件中显示图像时遇到问题。我设法获得了我需要的所有数据（价格、描述、标题），但我无法获得图像。该过程是，当用户单击某个组件时，它会打开该特定产品的pdp

请确定错误在这里：

我应该放什么来代替这个.state.image

提前谢谢

我的代码结构：

App.js
   ├── Header.js
   ├── Home.js
   ├── shop.js
            ├── PictureCard.js
   ├── Pdp.js
   ├── About.js
   └── Footer.js

我的代码：

App.js

import React from "react"
import Header from "./components/Header"
import Main from "./components/Main"
import Footer from "./components/Footer"

import './App.css';

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      productId: "",
      productTitle: "",
      productPrice: "",
      productDescription: "",
      productImage: ""
    }
  }

  handleCallback = (id, name, price, description, image) => {
    this.setState({
      productId: id,
      productTitle: name,
      productPrice: price,
      productDescription: description,
      productImage: image
    })
  }

  render() {
    return (
      <div className="App">
          <Header />
          <Main 
            parentCallback = {this.handleCallback}
            productDescription = {this.state.productDescription} 
            productPrice = {this.state.productPrice}
            productImage = {this.state.image}
          />
          <Footer />
      </div>
    )
  }
  
}

export default App

从“React”导入React
从“/components/Header”导入标题
从“/components/Main”导入Main
从“/components/Footer”导入页脚
导入“/App.css”；
类应用程序扩展了React.Component{
构造函数（）{
超级（）
此.state={
产品ID:“”，
产品名称：“，
产品价格：“，
产品说明：“，
productImage:“
}
}
handleCallback=（id、名称、价格、描述、图像）=>{
这是我的国家({
productId:id，
产品名称：名称，
产品价格：价格，
productDescription:description，
productImage:image
})
}
render（）{
返回(
)
}
}
导出默认应用程序

Main.js

import React from 'react'
import { Switch, Route } from 'react-router-dom'
        
import Home from './Home'
import Shop from './Shop'
import About from './About'
import Pdp from './Pdp'
        
    function Main({parentCallback, productDescription, productPrice, productImage}) {
        return (
            <Switch> {/* The Switch decides which component to show based on the current URL.*/}
                <Route exact path='/' render = {(props) => (<Home parentCallback={parentCallback} {...props}/>)}/>
                <Route exact path='/shop' render = {(props) => (<Shop parentCallback={parentCallback} {...props}/>)}/>
                <Route exact path='/pdp/:productTitle' render = {(props) => (<Pdp 
                    parentCallback={parentCallback} 
                    productDescription={productDescription} 
                    productPrice={productPrice} 
                    productImage={productImage} 
                    {...props}/>)}/>
                <Route exact path='/about' render = {(props) => (<About parentCallback={parentCallback} {...props}/>)}/>
            </Switch>
        )
    }
        
export default Main

从“React”导入React
从“react router dom”导入{交换机，路由}
从“./主页”导入主页
从“./Shop”导入店铺
从“./About”导入关于
从“./Pdp”导入Pdp
函数Main（{parentCallback，productDescription，productPrice，productImage}）{
返回(
{/*开关根据当前URL决定显示哪个组件。*/}
()}/>
()}/>
()}/>
(
{this.props.match.params.productTitle}
€{this.state.price}
{this.state.description}
购买
)
}
}
导出默认Pdp；

在

App.js

中，您将向

主组件传递一个道具，如下所示：

productImage = {this.state.image}

但在应用程序状态中，甚至在设置状态中，您使用的是
productImage
。
通过道具初始化状态是文档中提到的一种反模式：，除此之外，您应该在codesandbox中放一个示例，因为您没有向我们展示您使用
parentCallback
设置图像的位置或方式。@DennisVash非常感谢您提供的信息！我不知道通过道具初始化状态是一种反模式。谢谢！！
productImage = {this.state.image}