在 React 中將圖片從一個組件傳遞到另一個組件

Question

我有一個產品組件，我希望將其圖片傳遞給另一個組件，我的圖片是從 Rails 后端上傳的，並且映射了產品詳細信息。 我想要實現的是，當您單擊按鈕時，您的產品圖片將顯示在設計頁面中以進行定制設計。

import axios from 'axios';
import CardDeck from 'react-bootstrap/CardDeck';
import Card from 'react-bootstrap/Card';
import {Link} from 'react-router-dom';
import Display from './Display';


const SERVER_URL = "http://localhost:3000/products/index";
const IMAGE_URL = "http://localhost:3000/";

class Product extends Component {
   constructor(props) {
       super(props);
       console.log(props);
       this.state = { 
           products: [],
           name: '',
           material: ''
        }
   }

    fetchProducts () {
       axios.get(SERVER_URL).then((res) => {
           //console.log(res.data);
          const allProducts = res.data;
          //this.setState({product: []});
          this.setState({products: res.data});
          this.setState({material: res.data.id});

           // const aProduct = [...new Set(allProducts.map(pro => pro.name))]
           // console.log(aProduct);  

       })

   }
   componentDidMount(){
       this.fetchProducts();
   }
  _handleClick = event => {
   event.preventDefault();
   axios.get(SERVER_URL,{
       //product:{name: this.state.name, category: this.state.category}
   }).then(res =>{
       this.setState({

       })

   }).catch(error => {console.log(error);
   });
  }

   render() {
       return (

           <div className="productGrid">
               {this.state.products.map((product, index) => (
                   // <p>Name: {product.name} <p>Price:{product.price}</p> <p>Category:{product.category}</p>
                   //     <p> Fixing Method:{product.fixing_method}</p> <p>Material:{product.material}</p> 
                   //     <p>Height:{product.height}</p>

                         <CardDeck>
                         <Card>
                             <Card.Img variant="top" src={IMAGE_URL + product.img_tag} />
                             <Card.Body>
                                 <Card.Title>Name: {product.name}</Card.Title>
                                 <Card.Text>Category: {product.category}</Card.Text>
                                 <Card.Text>Price: ${product.price}</Card.Text>
                                 <Card.Text>Material: {product.material}</Card.Text>
                                 <Card.Text>Fixin Method: {product.fixing_method}</Card.Text>
                                 <Card.Text>Shape: {product.shape}</Card.Text>
                                 <Card.Text>Height: {product.height}</Card.Text>
                                 <Card.Text>Width: {product.width}</Card.Text>
                                 <Link to={"/DesignPage/" + product.id}><button >Design Me</button></Link> 
                             </Card.Body>
                         </Card>
                 </CardDeck>


            ))}
            <Display image={IMAGE_URL + product.img_tag}/>
           </div>
        );
   }
}

export default Product;

設計頁面當您單擊“設計我”按鈕時，根據產品，該產品的圖片應出現在設計頁面中

import React, { Component } from 'react';
import SideBar from './SideBar';
import Nav from './Nav'
import Display from './Display';
class DesignPage extends Component {
    constructor(props) {
        super(props);
        // console.log(props.match.params.design);

        this.state = {  }
    }
    render() { 
        return ( 
            <div><Nav/>

            <div className="container py-4">

                <div className="row">
                <div className="col-lg-5">
                <SideBar/>
            </div>
            <div className="col-lg-6">
            {/* <Display design={this.props.match.params.design}/>  */}
            <Display/>
            </div>
            </div>
            </div>
            </div>
        );
    }
}

export default DesignPage;

展示

import React from 'react';
import Product from './Product';

const Display = (props) => {
    console.log(props.design);
    return(
       <div className="card card-content">
           <div className="container-lg">
            <div>{props.design}</div>

           </div>
       </div>
    )
}
export default Display;

Answer 1

像props.image而不是props.design這樣的訪問，因為我可以看到您正在將您的連接 url 分配給Product組件中的image 。

const Display = (props) => {
    console.log(props.image);
    return(
       <div className="card card-content">
           <div className="container-lg">
            <div>{props.image}</div>

           </div>
       </div>
    )
}