我目前的 Parent 设置如下,然后我将其传递给
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>
);
}
}
然后在我的 child 中,我想将这些相同的 Prop 传递给另一个 child
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;
我似乎不知道该怎么做。有人告诉我,设置与第一个 child 完全相同,但是当我输入相同的代码时,它不起作用。
最佳答案
您可以将 {...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;
关于javascript - 如何将 React prop 从父级传递给子级,再传递给另一个子级?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58019163/