如何將 state 傳遞給 React 中的道具

Question

我是 React 的新手，並試圖制作一個項目，該項目使用 disc.js 文件作為 MenuComponent.js 中的參數以在 DishdetailComponent.js 中使用。 但是，當我編譯時，它沒有給出任何錯誤或警告。 MenuComponent.js 是我的父級，而 DishdetailComponent.js 是我的代碼中的子級。

菜單組件.js：

import React, { Component } from 'react';
import DishDetail from './DishdetailComponent';
import { DISHES } from './dishes';

class Menu extends Component {

  constructor(props) {
    super(props);
    this.state = {
      dishes: DISHES
    };
  }
  render() {
    return (
      <DishDetail dishes = {this.state.dishes} />
    )
  }
}

export default Menu;

DishdetailComponent.js：

  function renderDish({ dish }) {
    if (dish != null) {
      const dishList = dish.map((Dish) => {
      return (
        <div className="col-12 col-md-5 m-1">
          <Card>
            <CardImg width="100%" object src={Dish.image} alt={Dish.name}></CardImg>
            <CardBody>
              <CardTitle>{Dish.name}</CardTitle>
              <CardText>{Dish.description}</CardText>
            </CardBody>
          </Card>
        </div>
      );
    });
    return (
      {dishList}
    );
    } else {
      return <div></div>;
    }
  }

  function renderComments(comments) {
    if (comments != null) {
      const commentsList = comments.map((Comment) => {
        return (
          <div className="container">
            <li key={Comment.id}>
              <p>{Comment.Comment}</p>
              <p>
                -- {Comment.author},
                {new Intl.DateTimeFormat("en-US", { year: "numeric", month: "short", day: "2-digit" }).format(new Date(Date.parse(Comment.id)))}
              </p>
            </li>
          </div>
        );
      });
      return (
        <div className="col-12 col-md-5 m-1">
          <h3>Comments</h3>
          <ul className="list-unstyled">{commentsList}</ul>
        </div>
      );
    } else {
      return <div></div>;
    }
  }

const DishDetail = (props) => {
    if (props.dish != null) {
      return (
        <div className="row">
          <renderDish dish={props.dish} />
          <renderComments comments={props.dish.comments} />
        </div>
      );
    } else {
      return <div></div>;
    }
  };

export default DishDetail;

App.js，我在這里調用菜單：

import './App.css';
import { Navbar, NavbarBrand } from 'reactstrap';
import React, {Component} from 'react';
import Menu from './components/MenuComponent';


class App extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div className="App">
        <Navbar dark color="primary">
          <div className="container">
            <NavbarBrand href="/">Ristorante Con Fusion</NavbarBrand>
          </div>
        </Navbar>
        <Menu />
      </div>    
    );
  }
}

export default App

Answer 1

你有錯字：

菜單組件.js：

  render() {
    return (
      <DishDetail dishes = {this.state.dishes} />
    )
  }

DishdetailComponent.js：

function renderDish({ dish }) {

換dishes ，應該可以的。