时间戳

首页 > 解决方案 > 将道具从菜单组件传递到菜式细节

javascript - 将道具从菜单组件传递到菜式细节

问题描述

我是 react.js 的新手并且一直面临这个问题。我正在开发这个应用程序菜，用户单击一个菜然后它以卡片的形式呈现。菜的值作为道具从 menucomponent 传递到 DishDetail 但在这样做，菜对象总是接收到屏幕上没有任何内容的空值。请帮我解决这个问题。我将 MenuComponents.js 和 DishDetail.js 都附加了，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 = {
         selectedDish: null
      };
   }

   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">
               {/* <Media tag="li">
                  <Media left middle>
                        <Media object src={dish.image} alt={dish.name} />
                  </Media>
                  <Media body className="ml-5">
                     <Media heading>{dish.name}</Media>
                     <p>{dish.description}</p>
                  </Media>
               </Media>  */}
               <Card key={dish.id} 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">
               {/* <Media list>
                  {menu}
               </Media> */}
               {menu}
            </div>
            <DishDetail dish={this.state.selectedDish} />
         </div>
      );
   }
}

export default Menu;

DishDetail.js 是：

import React, { Component } from 'react';
import { Card, CardImg, CardImgOverlay, CardText, CardBody,CardTitle } from 'reactstrap';

class DishDetail extends Component{
    constructor(props){
        super(props);
    }


    renderDish(dish) {
    
        if (dish != null)
            return(
                <Card>
                    <CardImg top src={dish.image} alt={dish.name} />
                    <CardBody>
                    <CardTitle>{dish.name}</CardTitle>
                    <CardText>{dish.description}</CardText>
                    </CardBody>
                </Card>
            );
            
        else
            return(
                <div></div>
            );
     }

    render() {
        const dish = this.props.selectedDish;
        console.log(dish);
        return(
            <div className="row">
                <div className="col-12 col-md-5 m-1">
                    {this.renderDish(this.props.selectedDish)}
                </div>
                <div className="col-12 col-md-5 m-1">
                </div>
            </div>
        );
    }
}

export default DishDetail;

标签： javascriptreactjs

解决方案

您将一个名为的属性传递dish给您的组件，但使用selectedDish.

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

const dish = this.props.selectedDish;

推荐阅读