在React中不同组件之间进行通信的好方法是什么。
例如,这是我的结构:
word[]
我尝试让Searchbox与补充工具栏进行通信,因为SearchBox的一个元素(在这种情况下,主class App extends React.Component {
render() {
return (
<div className="App">
<SideBar title="My Sidebar"/>
<SearchBox/>
</div>
);
}
};
class SideBar extends React.Component {
constructor(props) {
super(props);
}
Toggle = () => {
this.refs.leftNav.toggle();
}
render() {
return (
<LeftNav ref="leftNav" className="sidebar">
<MenuItem index={0}>A</MenuItem>
<MenuItem index={1}>B</MenuItem>
</LeftNav>
);
}
}
class SearchBox extends React.Component {
constructor(props) {
super(props);
}
handleClick = (event) => {
this.refs.leftNav.Toggle(); // Doesn't work obsviously...
}
render() {
return (
<div onClick={this.handleClick}>
Hello
</div>
);
}
)必须在点击时切换<div>
。但是我没有看到一种简单的方法来做这种事情以及做这种事情的正确和推荐的方法是什么?