首先，我是新来的反应。我被要求创建一个名为DishDetailComponent.js的react组件，该组件将显示一个具有一个菜的图像，标题和一些描述的菜（一个菜），该组件将从显示所有菜的组件中调用，并且当用户单击其中一个菜式，将调用DishDetailComponent并传递一些道具（选定菜式），以便显示菜式图像，标题和菜式描述。我有点不知道如何将其组合在一起。任何人都可以帮助指导以实现这一目标。以下是文件：
App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import { Navbar, NavbarBrand } from 'reactstrap';
import Menu from './components/MenuComponent' ;
import './App.css';
import { DISHES } from './shared/dishes' ;
//function App()
class App extends Component {
constructor(props) {
super(props) ;
this.state = {
// this dishes object will be passed child component "Menu"
dishes: DISHES
}
}
render() {
return (
<div>
<Navbar dark color="primary">
<div className="container">
<NavbarBrand href="/">Ristorante Con Fusion</NavbarBrand>
</div>
</Navbar>
<Menu dishes={this.state.dishes} />
</div>
);
}
}
export default App;
MenuComponent.js
import React, { Component } from 'react';
import { Media } from 'reactstrap' ;
import { Card, CardImg, CardImgOverlay, CardText, CardBody,CardTitle } from 'reactstrap';
import Dishdetail from 'DishdetailComponent' ;
class Menu extends Component {
constructor(props) {
super(props) ;
this.state = {
//This is implemented to click event to take the dish page
selectedDish : null
}
}
onDishSelect(dish) {
//when user chooses a dish update state to "selectedDish to currebt dish"
this.setState({ selectedDish: dish })
}
// This function renders the selectedDish and displays below
//<div className="row">
// {this.renderDish(this.state.selectedDish)}
//</div>
render() {
// using props keyword we can use to map the array
const menu = this.props.dishes.map((dish) => {
return (
<div key={dish.id} className="col-12 col-md-5 m-1">
<Card onClick={ () => this.onDishSelect(dish)}>
<CardImg width="100%" src={dish.image} alt={dish.name} />
<CardImgOverlay>
<CardTitle>{dish.name}</CardTitle>
</CardImgOverlay>
</Card>
</div>
)
})
return (
<div className="container">
<div className="row">
{menu}
</div>
<div className="row">
<Dishdetail />
</div>
</div>
)
}
}
export default Menu;
DishDetailComponent.js
import React, { Component } from 'react';
import { Media } from 'reactstrap' ;
import { Card, CardImg, CardImgOverlay, CardText, CardBody,CardTitle } from 'reactstrap';
class Dishdetail extends Component {
constructor(props) {
super(props) ;
this.state = {
//This is implemented to click event to take the dish page
//selectedDish : null
selectedDish : null
}
}
onDishSelect(dish) {
//when user chooses a dish update state to "selectedDish to currebt dish"
this.setState({ selectedDish: dish })
}
renderDish(dish) {
// make sure the selected dish is an existing dish
if(dish != null) {
return (
<Card>
<CardImg width="100%" src={dish.image} alt={dish.name} />
<CardBody>
<CardTitle>{dish.name}</CardTitle>
<CardText>{dish.description}</CardText>
</CardBody>
</Card>
)
}
else {
return (
<div></div>
);
}
}
// This function renders the selectedDish and displays below
//<div className="row">
// {this.renderDish(this.state.selectedDish)}
//</div>
render() {
return (
<div className="col-12 col-md-5 m-1">
<div className="container">
<div className="row">
{this.renderDish(this.state.selectedDish)}
</div>
</div>
</div>
)
}
}
export default Dishdetail;
菜肴文件
export const DISHES =
[
{
id: 0,
name:'Uthappizza',
image: 'assets/images/uthappizza.png',
category: 'mains',
label:'Hot',
price:'4.99',
description:'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.',
comments: [
{
id: 0,
rating: 5,
comment: "Imagine all the eatables, living in conFusion!",
author: "John Lemon",
date: "2012-10-16T17:57:28.556094Z"
},
{
id: 1,
rating: 4,
comment: "Sends anyone to heaven, I wish I could get my mother-in-law to eat it!",
author: "Paul McVites",
date: "2014-09-05T17:57:28.556094Z"
},
{
id: 2,
rating: 3,
comment: "Eat it, just eat it!",
author: "Michael Jaikishan",
date: "2015-02-13T17:57:28.556094Z"
},
{
id: 3,
rating: 4,
comment: "Ultimate, Reaching for the stars!",
author: "Ringo Starry",
date: "2013-12-02T17:57:28.556094Z"
},
{
id: 4,
rating: 2,
comment: "It's your birthday, we're gonna party!",
author: "25 Cent",
date: "2011-12-02T17:57:28.556094Z"
}
]
您只需要将this.state.selectedDish作为prop传递给DishDetail组件并根据prop进行渲染
<Dishdetail selectedDish={this.state.selectedDish}/>
DishDetail组件
import React, { Component } from 'react';
import { Media } from 'reactstrap' ;
import { Card, CardImg, CardImgOverlay, CardText, CardBody,CardTitle } from 'reactstrap';
class Dishdetail extends Component {
renderDish() {
// make sure the selected dish is an existing dish
const dish = this.props.selectedDish
if(dish != null) {
return (
<Card>
<CardImg width="100%" src={dish.image} alt={dish.name} />
<CardBody>
<CardTitle>{dish.name}</CardTitle>
<CardText>{dish.description}</CardText>
</CardBody>
</Card>
)
}
else {
return null;
}
}
render() {
return (
<div className="col-12 col-md-5 m-1">
<div className="container">
<div className="row">
{this.renderDish()}
</div>
</div>
</div>
)
}
}
export default Dishdetail;