在React应用中添加一个新的disdetailcomponent来显示特定碟子的详细信息

Question

我是React的新手，当从另一个Dishdetail组件在React中单击一个项目时，我面临着获取项目详细信息的问题。我有MenuComponent.js，它应该调用disdetailcomponent .js当任何卡片被点击，但是我没有得到任何响应，点击什么都没有发生。

下面是菜单组件的代码，用来调用Dish detail组件:

import { div } from 'prelude-ls';
import React, { Component } from 'react';
import { Card, CardImg, CardBody, CardTitle, CardText, CardImgOverlay } from 'reactstrap';
import DishDetail from './DishdetailComponent';
//Adding a new component
class Menu extends Component {
constructor(props) {
super(props);
this.state = {
selectedDish: null,
}
}
//By this we change the state
onDishSelect(dish) {
this.setState({ selectedDish: dish });
}

render() {
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>
{/* This will render the dish on which we have clicked  */}
<div className="row">
<div className="col-12 ml-1">
<DishDetail />
</div>
</div>
</div>
);
}
}
export default Menu;

这是我的disdetailcomponent:

import React, { Component } from 'react';
import { Card, CardImg, CardBody, CardTitle, CardText, CardImgOverlay } from 'reactstrap';
import { DISHES } from '../shared/dishes';

// Adding DishDetail component
class DishDetail extends Component {
constructor(props) {
super(props);
this.state = {
dishes: DISHES,
};
}

renderDish(dish) {
if (dish != null) {
return (
<div key={dish.id} className="row">
<div className="col-12 col-md-5 m-1">
<Card>
<CardImg width="100%" src={dish.image} alt={dish.name} />
<CardBody>
<CardTitle>{dish.name}</CardTitle>
<CardText>{dish.description}</CardText>
</CardBody>
</Card>
</div>
</div>
)
}
else {
return (
<div></div>
)
}
}
renderComments(comments) {
if(comments==null){
return(
<div></div>
)
}
const showComments = comments.map((cmnt) => {
return(
<li key={cmnt.id}>
<p>cmnt.comment</p>
<p>--cmnt.author,cmnt.date</p>
</li>
)
});
return(
<div className="col-12 col-md-5 m-1">
<h3>Comments</h3>
{showComments}
</div>
)
}

render() {
const dish = this.props.dish;
if(dish == null)
{
return(
<div></div>
)
}
const dishItem = this.renderDish(dish);
const dishComment = this.renderComments(dish.comments);

<div className="container">
{dishItem}
{dishComment}
</div>
}
}

export default DishDetail;

Answer 1

您必须绑定onDishSelect函数。

见下文:

import { div } from 'prelude-ls';
import React, { Component } from 'react';
import { Card, CardImg, CardBody, CardTitle, CardText, CardImgOverlay } from 'reactstrap';
import DishDetail from './DishdetailComponent';
//Adding a new component
class Menu extends Component {
constructor(props) {
super(props);
this.state = {
selectedDish: null,
}
// BINDING YOUR FUNCTION
this.onDishSelect = this.onDishSelect.bind(this);

}
//By this we change the state
onDishSelect(dish) {
this.setState({ selectedDish: dish });
}

render() {
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>
{/* This will render the dish on which we have clicked  */}
<div className="row">
<div className="col-12 ml-1">
<DishDetail />
</div>
</div>
</div>
);
}

}

导出默认菜单;

这应该可以解决您的问题。如果你不想绑定所有声明的函数，那么使用ES6语法。

。我们像这样定义onDishSelect函数:

onDishSelect = () => {
this.setState({ selectedDish: dish });
}

Answer 2

你还没有将props传递给DishDetail组件，它应该是:

<DishDetail dish={this.state.selectedDish} /> 

并执行用户建议的实现:@Sankshit Pandoh

Answer 3

我在disdetailcomponent的render()方法中发现了以下错误-如果dish != null:

render() {
const dish = this.props.dish;
if(dish == null)
{
return(
<div></div>
)
} else {
const dishItem = this.renderDish(dish);
const dishComment = this.renderComments(dish.comments);
return (
<div className="container">
{dishItem}
{dishComment}
</div>
)
}
}