在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

访问类似于道具。图像，而不是道具。设计正如我所见，您正在将连接url分配给产品组件中的图像。

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

           </div>
       </div>
    )
}