将反应道具传递给组件并显示

Question

首先我是react新手。我被要求创建一个名为 DishDetailComponent.js 的反应组件，它将显示一道菜（一道菜），其中有一张图片、标题和一些关于这道菜的描述，这个组件将从将显示所有菜肴的组件中调用，当用户点击其中一道菜时，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"
            }
        ]

Answer 1

你只需要将 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;

将反应道具传递给组件并显示

Passing react props to a component and displaying

components

reactjs

react-props

react-component