javascript - 在组件之间传递 props | 反应
问题描述
我想将主组件的道具或功能传递给子组件以使其工作。完全我需要将道具传递给三个组件才能到达它的子组件。下面是我的代码,它不能正常工作。我想,我的代码会说,我想要实现什么。
如果我想在单个组件中实现相同的目标,它会很好地工作。但是,当我尝试分解成不同的组件时,我做不到。我在传递道具时犯了错误。
提前致谢。
/**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
,它总是会渲染相同的东西。
如果要从子组件中更新父组件的状态,则必须将更新回调作为道具传递。在这种情况下,您需要将handleClick
down from传递Home
到 to ComponentThree
,然后将其用作按钮的单击处理程序。
此外,您正在尝试componentToRender
从this.state
子组件中读取 - 您需要使用this.props
,因为您将值作为道具向下传递。
还值得注意的是,React Context在尝试使深度嵌套的组件可用时很有用——也就是说,它们不是你应该过度使用的东西,我建议在尝试之前先把东西作为道具传递出去潜入使用上下文。
推荐阅读
- javascript - 当鼠标悬停在下一个或上一个 div 上时隐藏活动 div
- python - 使用正则表达式从文本中提取未知数量的字符串
- python - 尝试使用 pyautogui.press('volumemute') 使系统静音,但它什么也没做
- python - 极小极大函数内国际象棋移动生成的转置表
- php - Laravel 在下拉菜单中预选
- azure - 限制对 Azure 存储库的访问
- java - 由于 Android Studio 中的运行时异常,Android 应用程序崩溃
- javascript - MongoDB UpdateOne 没有更新,尽管它给出了成功的消息
- python - 如何在 python turtle 的中心点周围绘制多边形
- java - 为什么maven在我的项目中安装了itextsharp的依赖而不是com.lowagie.itext?