Как передать React реквизит от родителя ребенку другому ребенку?

Question

У меня в настоящее время мой Родитель настроен следующим образом, который я затем передаю реквизитам на

 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;

Я не могу понять, как бы я поступил так.Мне говорят, что настройка точно такая же, как у первого ребенка, но когда я ввожу тот же код, он не работает.

Answer 1

Когда вы пропускаете реквизит, разрушающий его, эффект такой же, как вы пропускали реквизит один за другим.

Вы не можете достичь своей цели, потому что в вашем компоненте Workout отсутствует реквизит "workout".

Попробуйте передать реквизиты компоненту Exercise следующим образом:

<Exercise {...props} />

Answer 2

Вы можете передать {...props} в ваш Exercise компонент, чтобы ваш компонент Workout должен выглядеть следующим образом

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;