reactJS中组件之间的方法传递

Question

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

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

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

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

作为子组件的另一个组件称为菜单，我使用事件处理程序 onClick 调用父类“Main”中存在的方法“onDishSelect”。这正是我在父组件中所做的，以获取在事件处理程序 Onclick 中调用的方法：

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

我将此作为属性添加到子组件中，以使用父组件中的方法。我知道我的代码中缺少一些东西。然而，我处理不了。我想要一种方法来使用方法，而无需在子组件中再次编写此方法。

我很感激任何帮助来解决这个问题，因为我无缘无故地花了很多时间。提前致谢。

附：这是我的主要组件和我的菜单组件代码：

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);
}

将函数作为 prop 传递给子组件：

/*Main.js */

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

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