class Dashboard extends Component {
render() {
return (
<div className="row">
<SidePanel />
<DashboardContentPanel />
</div>
);
}
}
我的问题是:在sidePanel中,有6个按钮,根据单击的按钮,我想更改DashboardContentPanel的内容
我是ReactJS的新手!帮我。只是一个逻辑!
答案 0 :(得分:1)
您需要做的是在Dashboard类中定义一个函数,并将该函数作为道具传递给Sidepanel组件。现在,单击按钮时,可以触发Dashboard类中定义的函数。您可以相应地更改状态并将其作为道具传递给DashboardContentPanel。希望能解决它:)
答案 1 :(得分:1)
您可以使用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>