импорт React, {Component} из 'react'; импортировать {Card, CardImg, CardImgOverlay, CardText, CardBody, CardTitle} из responsestrap; импортировать DishDetailComponent из './DishDetailComponent';
class Menu расширяет Component {
constructor(props){
super(props);
this.state={
selectedDish:null
}
}
onDishSelect(dish){
this.setState({selectedDish:dish});
}
renderDish(dish){
if(dish != null){
return(
<DishDetailComponent wish={this.props.dishes}/>
);
}
else
return(
<div></div>
);
}
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>
<div className="row">
{this.renderDish(this.state.selectedDish)}
</div>
</div>
);
}
} экспорт меню по умолчанию; это изображение относится к файлу App. js, в котором я передаю реквизиты родительскому компоненту, который является компонентом меню. [это изображение является родительским компонентом компонента меню. [это изображение представляет собой главный дочерний компонент, в котором я хочу, чтобы реквизиты посуды работали onclick, но он не работает, он ничего не показывает oncliuck. это результирующее изображение в браузере, но в этом случае кажется, что большой дочерний компонент не работает, так как при нажатии на изображения ничего не происходит.