class Dashboard extends Component {
render() {
return (
<div className="row">
<SidePanel />
<DashboardContentPanel />
</div>
);
}
}
我的问题是:sidePanel 中有 6 个按钮,根据单击的按钮,我想更改 DashboardContentPanel 的内容
我是 ReactJS 的新手!帮我。只是一个逻辑!
您可以使用ref
访问整个组件功能
让我们考虑一下您的DashboardContentPanel
组件有一个调用的函数,myFunctionButtonOne
并且您需要在SidePanel
组件中单击按钮时触发此函数,因此该Dashboard
组件将成为 ( SidePanel
, DashboardContentPanel
) 组件之间的中介
class Dashboard extends Component {
render() {
return (
<div className="row">
<SidePanel handleButtonOne={this.panel.myFunctionButtonOne} />
<DashboardContentPanel ref={(panel)=> this.panel = panel} />
</div>
);
}
}
当我们将 handleButtonOne 作为道具传递时,我们可以像这样使用它
<button onClick={this.props.handleButtonOne}>Click me</button>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句