使用 React 中的新詳細信息組件從 json 列表中獲取單個項目的詳細信息

Question

我是 React 的新手，當在 React 中從另一個 Details 組件單擊一個項目時，我面臨獲取項目詳細信息的問題。 我有 MenuComponent.js，它應該在單擊任何卡片時調用 DishDetailComponent.js，但是當我這樣做時，我的菜餚詳細信息組件出現錯誤

 const DishDetail = this.props( (selectedDish)=> { })

this.props 不是一個函數。 下面是 Menu Component 中用來調用 DishDetail 組件的代碼

import React, { Component } from 'react';
import { Media } from "reactstrap";
import { Card, CardImg, CardImgOverlay, CardText, CardBody, CardTitle } from 
"reactstrap";
import DishDetail from './DishDetailComponent.js';

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">
                <Card onClick={()=>this.onDishSelect(dish)}>
                    <CardImg width="100%" src={dish.image} alt={dish.name} />
                    < CardImgOverlay>
                        <CardTitle>{dish.name}</CardTitle>
                        <p>{dish.description}</p>
                    </CardImgOverlay>
                </Card>
            </div>
        );
    });
    return(
        <div className="container">
            <div className="row">
                {menu}
            </div>
            <div className="row">
                <DishDetail selectedDish={this.state.selectedDish}/>
            </div>
        </div>
    );
  }
}

export default Menu;

這是我的 DishDetail 組件，它給我帶來了問題

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

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

 render() {
     const DishDetail = this.props( (selectedDish)=> {
         if (selectedDish != null) {
             return (
                 <Card>
                     <CardImg width="100%" src={selectedDish.image} alt={selectedDish.name} />
                     <CardBody>
                         <CardTitle>{selectedDish.name}</CardTitle>
                         <CardText>{selectedDish.description}</CardText>
                     </CardBody>
                 </Card>
             )
         } else {
             return (
                 <div></div>
             );
         }
     });

     return (
         <div className="container">
             <div className="row">
                 {DishDetail}
             </div>
         </div>
     )
   }
 }

 export default DishDetail;

謝謝

Answer 1

這應該有效：

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() {

        return (
            <div className="container">
                <div className="row">
                    {this.renderDish(this.props.selectedDish)}
                </div>
            </div>
        )

    }
}

export default DishDetail;

Answer 2

this.props不是一個函數，它是一個對象。 試着這樣寫你的DishDetail 。

 import React, { Component } from 'react'; import { Card, CardImg, CardImgOverlay, CardText, CardBody, CardTitle } from "reactstrap"; class DishDetail extends Component{ constructor(props) { super(props); } render() { const { selectedDish } = this.props; const DishDetail = () => { if (selectedDish) { return ( <Card> <CardImg width="100%" src={selectedDish.image} alt={selectedDish.name} /> <CardBody> <CardTitle>{selectedDish.name}</CardTitle> <CardText>{selectedDish.description}</CardText> </CardBody> </Card> ) } return ( <div /> ); } return ( <div className="container"> <div className="row"> {DishDetail} </div> </div> ) } } export default DishDetail;

Answer 3

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

const DishDetail = ({ selectedDish }) => {
    return (
        <div className="container">
            <div className="row">
                { selectedDish &&
                    <Card>
                        <CardImg width="100%" src={selectedDish.image} alt={selectedDish.name} />
                        <CardBody>
                            <CardTitle>{selectedDish.name}</CardTitle>
                            <CardText>{selectedDish.description}</CardText>
                        </CardBody>
                    </Card>
                }
            </div>
        </div>
    )
};

export default DishDetail;

這個組件的目的是展示信息，所以這里的功能組件是更好的選擇（而不是類），但對此沒有限制，只是一個建議。 嘗試遍歷代碼並理解它，如果有任何問題，請不要擔心。