使用 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;

这个组件的目的是展示信息，所以这里的功能组件是更好的选择（而不是类），但对此没有限制，只是一个建议。 尝试遍历代码并理解它，如果有任何问题，请不要担心。