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

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;

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

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

3 个答案: