[英]Passing props from component to component | React
我想将主要组件的道具或功能传递给子组件以工作。 完全我需要将道具传递给三个组成部分才能到达其子组成部分。 下面是我的代码,无法正常工作。 我想,我的代码会说我想要实现的目标。
如果我想在单个组件中实现相同的功能,则效果很好。 但是,当我尝试分解为不同的组件时,我做不到。 我在传递道具时犯了错误。
提前致谢。
/**Home Component**/
class Home extends Component {
constructor(props) {
super(props);
this.state = {
value: null,
componentToRender: null //tells switch which component to render
};
this.renderComponent = this.renderComponent.bind(this)
};
handleEvent = (button) => {
this.setState({value: button});
};
handleClick = () => {
this.setState({componentToRender: this.state.value})//take the
// currently selected component and make it the component to render
};
//extract the switch statement to a method of its own
renderComponent() {
switch (this.state.componentToRender) {
case 0:
return 'cool';
case 1:
return 'not cool';
case 2:
return 'medium cool';
default:
return <ComponentOne toRender={this.state.componentToRender} />;
}
}
render() {
return (
<div>
{this.renderComponent()}
</div>
);
}
}
export default Home;
/**Component one***/
import ComponentTwo from './ComponentTwo.js'
class ComponentOne extends Component {
render(){
return (
<ComponentTwo toRender={this.state.componentToRender}/>
);
}
}
export default ComponentOne;
/**Component two***/
import ComponentThree from './ComponentThree.js'
class ComponentTwo extends Component {
render(){
return (
<ComponentThree toRender={this.state.componentToRender}/>
);
}
}
export default ComponentTwo;
/**Component three***/
class ComponentThree extends Component {
constructor(props){
super(props);
this.state = {
value: null,
};
};
handleEvent = (button) => {
this.setState({value: button});
};
handleClick = () => {
this.setState({componentToRender: this.state.value});
};
render(){
return (
<div >
<button onClick={() => this.handleEvent(0)}>Component
One</button>
<button onClick={() => this.handleEvent(1)}>Component
Two</button>
<button onClick={() => this.handleEvent(2)}>Component
three</button>
<button onClick={() => this.handleEvent(3)}>Component
Four</button>
<button variant="contained" onClick={this.handleClick}>
Register Now
</button>
</div>
);
}
}
export default Componentthree;
ComponentThree
正在设置自己的状态,而不是Home
的状态。 由于没有什么改变Home
的状态,因此它将始终呈现同一事物。
如果要从子组件中更新父组件的状态,则必须向下传递update回调作为道具。 在这种情况下,您需要将handleClick
从Home
传递到ComponentThree
,然后将其用作按钮的单击处理程序。
另外,您正在尝试从子组件的this.state
中读取componentToRender
, this.state
需要使用this.props
,因为要将这些值作为props传递给了他们。
还值得注意的是,当尝试使状态可用于深层嵌套的组件时, React Context可能会很有用-也就是说,它们不是您应该过度使用的东西,我建议在尝试之前先将其作为道具传递出去深入了解使用上下文。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.