javascript - 向 React 应用程序添加新的 DishdetailComponent 以显示特定菜肴的详细信息

问题描述

我是 React 新手，当从另一个 Dishdetail 组件在 React 中单击项目时，我遇到了获取项目详细信息的问题。我有 MenuComponent.js，它应该在单击任何卡时调用 DishDetailComponent.js，但是我没有得到任何响应，单击时没有任何反应。

下面是用来调用菜品详情组件的菜单组件的代码：

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;

这是我的 DishdetailComponent ：

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;

标签： javascriptreactjsreact-routerjsxreact-state

javascript - 向 React 应用程序添加新的 DishdetailComponent 以显示特定菜肴的详细信息

问题描述

解决方案

推荐阅读