如何将 React 道具从父母传递给孩子，再传递给另一个孩子？答案

【问题标题】：How do I pass a React prop from Parent to Child, to another Child?如何将 React 道具从父母传递给孩子，再传递给另一个孩子？
【发布时间】：2019-09-19 21:30:31
【问题描述】：

我目前的 Parent 设置如下，然后我将 props 传递给

 class WorkoutPlan extends React.Component {
  constructor() {
    super();
    this.state = {
      workoutPlan: {}
    };
  }

  componentDidMount() {
    axios
      .get("/api/workout-plan")
      .then(response => {
        this.setState({ workoutPlan: response.data });
      })
      .catch(error => {
        console.log(error);
      });
  }

  render() {
    const { workoutPlan } = this.state;
    // const workoutPlan = this.state.workoutPlan;

    return (
      <div>
        <h1>{workoutPlan.Name}</h1>
        <button className="button" onClick={this.handleClick}>
          Click Me
        </button>
        <Workout {...workoutPlan.workout} />
      </div>
    );
  }
}

然后在我的孩子身上，我想将这些相同的道具传递给另一个孩子

import React from "react";
import Exercise from "./Exercise";

const Workout = props => {
  return (
    <div>
      <h2>"Workout for {props.day}"</h2>
      <Exercise {...workoutPlan.workout} />
    </div>
  );
};

export default Workout;

我似乎不知道该怎么做。我被告知设置与第一个孩子完全相同，但是当我输入相同的代码时，它不起作用。

【问题讨论】：

<Exercise {...props.workoutPlan.workout} />

标签： javascript reactjs parent-child prop

【解决方案1】：

您可以将{...props} 传递给您的Exercise 组件，因此您的锻炼组件应如下所示

import React from "react";
import Exercise from "./Exercise";

const Workout = props => {
  return (
    <div>
      <h2>"Workout for {props.day}"</h2>
      <Exercise {...props} />
    </div>
  );
};

export default Workout;

【讨论】：

【解决方案2】：

当你传递 props 解构它时，它的效果和你一个一个传递 props 一样。

您无法实现目标，因为在您的锻炼组件中没有“锻炼”道具。

尝试像这样将道具传递给锻炼组件：

<Exercise {...props} />

【讨论】：