Javascript 在React中将图片从一个组件传递到另一个组件

我有一个产品组件，我希望将它的图片传递给另一个组件，我的图片是从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;

从“axios”导入axios；
从“react引导/CardDeck”导入CardDeck；
从“react引导/卡”导入卡；
从'react router dom'导入{Link}；
从“./Display”导入显示；
const SERVER_URL=”http://localhost:3000/products/index";
const IMAGE_URL=”http://localhost:3000/";
类产品扩展组件{
建造师（道具）{
超级（道具）；
控制台日志（道具）；
this.state={
产品：[]，
名称：“”，
材料：“”
}
}
获取产品（）{
get（服务器URL）。然后（（res）=>{
//console.log（res.data）；
const allProducts=res.data；
//this.setState（{product:[]}）；
this.setState（{products:res.data}）；
this.setState（{material:res.data.id}）；
//constaproduct=[…新集合（allProducts.map（pro=>pro.name））]
//console.log（一个产品）；
})
}
componentDidMount（）{
这是fetchProducts（）；
}
_handleClick=事件=>{
event.preventDefault（）；
获取（服务器的URL{
//产品：{name:this.state.name，类别：this.state.category}
})。然后（res=>{
这是我的国家({
})
}).catch（错误=>{console.log（错误）；
});
}
render（）{
返回(
{this.state.products.map（（产品，索引）=>(
//名称：{product.Name}价格：{product.Price}
类别：{product.Category}

//固定方法：{product.Fixing_Method}
材料：{product.Material}

//高度：{product.Height}

名称：{product.Name}
类别：{product.Category}
价格：${product.Price}
物料：{product.Material}
Fixin方法：{product.fixing_方法}
形状：{product.Shape}
高度：{product.Height}
宽度：{product.Width}
设计我
))}
);
}
}
导出默认产品；

设计页 当您点击design me按钮时，根据产品，该产品的图片应显示在设计页面中

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，{Component}来自'React'；
从“./SideBar”导入侧栏；
从“./Nav”导入导航
从“./Display”导入显示；
类DesignPage扩展组件{
建造师（道具）{
超级（道具）；
//日志（props.match.params.design）；
this.state={}
}
render（）{
报税表（
{/*   */}
);
}
}
导出默认设计页面；

展示

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;

从“React”导入React；
从“./产品”导入产品；
常量显示=（道具）=>{
控制台日志（道具设计）；
返回(
{props.design}
)
}
导出默认显示；

像

props.image

一样访问，而不是

props.design

，正如我看到的，您正在将链接url分配给

产品
组件中的
image

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

           </div>
       </div>
    )
}

const Display=（道具）=>{
console.log（props.image）；
返回(
{props.image}
)
}
如果问题仍然没有解决，请在沙盒中共享代码，以便我检查。嗨，瓦希德，谢谢你的回复，我更改了道具。图像，但我没有定义，我需要提到我的路线，js是这样的：```````