reactJS中组件之间的传递方法

Question

我最近开始学习ReactJ，我需要一些帮助。我在项目中创建了两个组件。第一个是MainComponent，它看起来如下：

  constructor(props) {
    super(props);
    this.onDishSelect = this.onDishSelect.bind(this);

    this.state = {
      dishes: DISHES,
      selectedDish: null
    };
  }

  onDishSelect(dishId) {
    this.setState({ selectedDish: dishId });
  }

另一个是子组件的组件称为Menu，我使用事件处理程序onClick调用了父类“ Main”中存在的方法“ onDishSelect”。这正是我在父组件中所做的，目的是在事件处理程序Onclick中调用该方法：

onClick={() => this.onDishSelect(dish)

我将此作为属性添加到子组件中，以使用父组件中的方法。我知道我的代码中缺少某些内容。但是，我无法应付。我想要一种方法，而无需在子组件中再次编写此方法。

我非常感谢您帮助我解决所有问题，因为我花了很多时间无缘无故地这样做。提前致谢。

P.s。这是我的主要组件和菜单组件代码：

class Main extends Component {
  constructor(props) {
    super(props);
    this.onDishSelect = this.onDishSelect.bind(this);

    this.state = {
      dishes: DISHES,
      selectedDish: null
    };
  }

  onDishSelect(dishId) {
    this.setState({ selectedDish: dishId });
  }

  render() {
    return (
      <div>
        <Navbar dark color="danger">
          <div className="container">
            <NavbarBrand href="/">Elite Café</NavbarBrand>
          </div>
        </Navbar>
        <Menu
          dishes={this.state.dishes}
          selectedDish={this.state.selectedDish}
          onClick={dishId => this.onDishSelect(dishId)}
        />
      </div>
    );
  }
}

export default Main;

-菜单组件代码：

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

class Menu extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  onDishSelect(dish) {
    this.setState({ selectedDish: dish });
  }
  renderDish(dish) {
    if (dish != null) {
      return (
        <Card className="col-12 col-md-5 col-sm-12 m-1 border-0">
          {/* <CardImg width="100%" object src={dish.image} alt={dish.name} />
          <CardBody className="cardBody">
            <CardTitle>
              <strong>{dish.name}</strong>
            </CardTitle>
            <CardText>{dish.description}</CardText> */}
          <DishDetail
            className="cardBody"
            selectedDish={this.state.selectedDish}
            dishes={this.props.dishes}
          />
          {/* </CardBody> */}
        </Card>
      );
    } else {
      return <div />;
    }
  }
  renderComments(dish) {
    if (dish != null) {
      return (
        <ul className="list-unstyled ml-1">
          <div className="col-12 col-md-10">
            <li>
              <strong>Comments</strong>
            </li>
            {dish.comments.map((item, id) => (
              <div key={id} className="mt-1">
                <div className="mb-2">{item.comment}</div>
                <li>
                  {" "}
                  <div>
                    -- {item.author}, {item.date}
                  </div>
                </li>
              </div>
            ))}
          </div>
        </ul>
      );
    } else {
      return <div />;
    }
  }

  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%" object src={dish.image} alt={dish.name} />
            <CardImgOverlay>
              <CardTitle>{dish.name}</CardTitle>
            </CardImgOverlay>
          </Card>
        </div>
      );
    });

    return (
      <div className="container">
        <div className="row">
          {menu}
          {this.renderDish(this.state.selectedDish)}
          {this.renderComments(this.state.selectedDish)}
        </div>
      </div>
    );
  }
}

export default Menu;

Answer 1

在菜单组件中，您正在设置状态selectedDish。如果尝试在父组件中设置状态，则可能要将Menu组件的onDishSelect更改为：

onDishSelect(dishId) {
  this.props.onClick(dishId);
}

将属性作为道具传递给子组件：

/*Main.js */

    <Menu
      dishes={this.state.dishes}
      selectedDish={this.state.selectedDish}
      onClick={this.onDishSelect}
    />

[建议，您要在父/主组件中设置selectedDish，并且可以在菜单中将其作为this.props.selectedDish进行访问，因此在菜单中也进行相同的设置是多余的。您可以将所有this.state.selectedDish菜单替换为this.props.selectedDish。