Question

我在2个不同的js文件中有2个类组件。 “ dish”变量在第一个文件中定义，我正在尝试在第二个文件中使用它。我还是这个新手，所以我真的不确定我是否正确地构造了这个结构。有人可以帮忙吗？

一流的组成部分

import React, { Component } from "react";
import {
  Card,
  CardImg,
  CardImgOverlay,
  CardText,
  CardBody,
  CardTitle
} from "reactstrap";
import Dishdetail from "./DishdetailComponent";

class Menu extends Component {
  constructor(props) {
    super(props);

    this.state = {
      selectedDish: null,
      details: Dishdetail
    };
  }
  onDishSelect(dish) {
    this.setState({
      selectedDish: dish
    });
  }

  renderDish(dish) {
    if (dish != null) {
      return <Dishdetail details={this.state.details} />;
    } else {
      return <div />;
    }
  }

  render() {
    const menu = this.props.dishes.map(dish => {
      return (
        <div className="col-12 col-md-5 m-1">
          <Card key={dish.id} onClick={() => this.onDishSelect(dish)}>
            <CardImg width="100%" src={dish.image} alt={dish.name} />
            <CardImgOverlay>
              <CardTitle> {dish.name} </CardTitle>
            </CardImgOverlay>
          </Card>
        </div>
      );
    });

    return (
      <div className="container">
        <div className="row"> {menu}</div>
        <div className="row">
          <div className="col-12 col-md-5 m-1">
            {this.renderDish(this.state.selectedDish)}{" "}
          </div>{" "}
        </div>{" "}
      </div>
    );
  }
}

export default Menu;

======================

第二个代码

import React, { Component } from "react";
import {
  Card,
  CardImg,
  CardImgOverlay,
  CardText,
  CardBody,
  CardTitle
} from "reactstrap";
import Menu from "./MenuComponent";

class Dishdetail extends Component {
  constructor(props) {
    super(props);

    this.state = {
      dish: Menu
    };
  }
  render() {
    return (
      <div className="container">
        <div className="row">
          <dish />
          <Card>
            <CardImg top src={dish.image} alt={dish.name} />
            <CardBody>
              <CardTitle>{dish.name}</CardTitle>
              <CardText>{dish.description}</CardText>
            </CardBody>
          </Card>
        </div>
      </div>
    );
  }
}

export default Dishdetail;

我收到的错误消息是未定义“ dish”变量

Answer 1

您不能在这样的孩子中将props设置为state，

this.state = {
   dish: Menu
};

当您从父组件传递details作为props时，您应该这样做，

constructor(props) {
    super(props)
    this.state = {
      dish: props.details,
    }
}

您应该在子组件中使用此状态。

{this.state.dish}

Demo-如何从父级传递数据以及子级组件中的用法。

更新

Your Code-我已更正您的代码。只需确保将正确的详细信息传递到Menu组件即可。

注意：由于我不知道this.props.dishes是什么，所以这段代码给您带来错误。忽略该错误，只专注于代码。

如何在React中将功能从组件传递到另一个组件

1 个答案: