javascript - 如何在 React.JS 中动态地将图像作为道具传递？

问题描述

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

肯定错误在这里：<img src={this.state.image} className="pdp-image"></img>

我应该放什么代替this.state.image？

提前致谢！

我的代码结构：

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

我的代码：

应用程序.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

主.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

pdp.js

import React from "react"

import { Link } from "react-router-dom"

import './Pdp.css'

class Pdp extends React.Component {
     constructor(props) {
          super(props)
          this.state = {
               description: this.props.productDescription,
               price: this.props.productPrice,
               image: this.props.productImage
          }
     }
     
     render() {
          return (
               <div className="pdp-page">
                   <h3 className="filter-title">
                        <Link to="/shop" className="no-dec">All pictures</Link> <span>&#8250;</span> <a href="" className="no-dec">{this.props.match.params.productTitle}</a>
                    </h3>
                   <div className="pdp-container">
                       <div>
                            <img src={this.state.image} className="pdp-image"></img>
                       </div>
                       <div className="pdp-info-container">
                            <h3 className="pdp-title">{this.props.match.params.productTitle}</h3>
                            <p className="pdp-info-paragraph">€ {this.state.price}</p>
                            <p className="pdp-info-paragraph">{this.state.description}</p>
                            <button className="purchase-button">Purchase</button>
                       </div>
                   </div>
               </div>
           )
     }
}

export default Pdp;

标签： javascriptreactjs

javascript - 如何在 React.JS 中动态地将图像作为道具传递？

问题描述

解决方案

推荐阅读