使用 React 中的新详细信息组件从 json 列表中获取单个项目的详细信息

Question

我是 React 的新手，当从另一个 Details 组件在 React 中单击项目时，我遇到了获取项目详细信息的问题。我有 MenuComponent.js，它应该在单击任何卡时调用 DishDetailComponent.js，但是当我这样做时，我的菜肴详细信息组件中出现错误

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

this.props 不是一个函数。这是菜单组件中用于调用 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

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;

这个组件的目的是展示信息，所以功能性组件在这里是更好的选择（而不是类），但是对此没有限制，只是一个推荐。尝试通过代码并理解它，如果有任何问题，请不要着急问..

Answer 3

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;