javascript - 如何在“深度 2”层次结构中使用道具

Question

我正在尝试将 App.js 文件的道具用于DishDetailComponent.js但我在这两个中间有其他组件，分配说：

• 在此任务中，您将向 React 应用程序添加一个新的 DishdetailComponent 并将该组件包含到菜单组件的视图中，以便在那里显示特定菜肴的详细信息：

• 将 MenuComponent 视图中显示所选菜肴的卡片替换为 DishdetailComponent，并确保将所选菜肴信息作为道具传递给 DishdetailComponent。

• 在 components 文件夹中名为 DishdetailComponent.js 的文件中创建一个新的 DishDetail 类 从该文件中导出 DishDetail 类，以便可以将其导入 MenuComponent.js 并用于构建所选菜肴的视图。

• 从 render() 函数返回一个。这应该使用 Bootstrap 行类将内容定位在 . 此 div 将在卡片中显示菜肴的详细信息，并在中到超大屏幕上并排显示评论列表，但在 xs 和 sm 屏幕上将它们堆叠起来。该卡应包含在适当的 Bootstrap 列类中，以便它占据 xs 和 sm 屏幕尺寸的全部 12 列，以及 md 及以上屏幕尺寸的 5 列。还要对这个 div 应用一个 m-1 类。

• 注释应包含在您应用适当列类的 a 中，以便它占据 xs 和 sm 屏幕尺寸的全部 12 列，以及 md 及以上屏幕尺寸的 5 列。还要对这个 div 应用一个 m-1 类。

• 如果菜是空的，那么你应该返回一个空的

应用程序.js

import MenuComponent from './component/MenuComponent'

import './App.css';
class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      dishes: DISHES
    }
  }


  render() {
    return (
      <div className="app">
        <Navbar dark color="primary">
          <div className="container">
            <NavbarBrand href="/">
              Ristorante Con Fusion
          </NavbarBrand>
          </div>
        </Navbar>
        <MenuComponent
          dishes={this.state.dishes}
        />


      </div>
    );
  }
}

export default App;

菜单组件.js

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

/* Components */
import DishDetail from './DishDetailComponent'

class MenuComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedDish: null
        };
        console.log('Menu Component constructor is invoked');
    }

    componentDidMount() {
        console.log('Menu Component componentDidMount is invoked')
    }

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

    renderDish(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>
            )
        }
    }


    render() {
        const menu = this.props.dishes.map((dish) => { /* This is a prop that are provided from App.js 
            in the render() <MenuComponent dishes={}> */
            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><strong>{dish.name}</strong></CardTitle>
                        </CardImgOverlay>
                    </Card>
                </div>
            );
        });



        console.log('Menu component render is invoked')

        return (
            <div className="container">
                <div className="row">
                    {menu}
                </div>
              
                <div className="row col-12 col-md-5 col-lg-5 mr-1">
                    <div>
                        <Card className="">
                            {this.renderDish(this.state.selectedDish)}
                        </Card>
                    </div>
                </div>
            </div>
        );
    }
}

export default MenuComponent;

DishDetailComponent.js

/* Modules */
import React, { Component } from 'react';
import { Card, CardText, CardBody, CardTitle, CardImg } from 'reactstrap';
/* Components */
/* Styles */



class DishDetailComponent extends Component {
    constructor(props) {
        super(props)
        this.state = {
        }
    }

    onDishSelect(dish) {
        this.setState({ selectedDish: dish })
    }

    renderDish(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>
            )
        }
    }



    render() {

        const comment = this.props.dishes.map((dish) => {
            return ( 
                <div key={dish.key}>
                    <ul className="unorder-list">
                        {dish.comments}
                    </ul>
                </div>
            )
        })

        return (
            <div className="row col-12 col-lg-5 m-1">
                <Card >
                  HEre i have to put the info the name the img and these things 
                </Card>
            </div>
        );
    }
}

export default DishDetailComponent;

这是我尝试做的最后一个组件，但我不知道如何很好地使用道具！

如果你想看我的 git https://gitlab.com/folayao/react-coursera-felipe

标签： javascripthtmlreactjs