我有一个产品组件,希望将其图片传递给另一个组件,我的图片是从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;
答案 0 :(得分:0)
像props.image
一样访问,而不是props.design
,因为我看到您正在将串联网址分配给image
组件中的Product
。
const Display = (props) => {
console.log(props.image);
return(
<div className="card card-content">
<div className="container-lg">
<div>{props.image}</div>
</div>
</div>
)
}