我正在使用没有FLux或Redux的ReactJS . 我希望grand child组件可以与他的祖父母组件进行通信(读取/更新数据) .
这是父组件 App :
export default class App extends React.Component {
static propTypes = {
children: React.PropTypes.object.isRequired
};
constructor(props) {
super(props);
this.state = {
tabActive: 0,
};
}
setTabActive(item) {
this.setState({
tabActive: item,
});
}
render() {
return (
<div>
<Header tabActive={this.state.tabActive} />
<Content>
{this.props.children}
</ Content>
<Footer />
</div>
);
}
}
子组件 Header :
export default class Header extends React.Component {
render() {
return (
<div>
....
<SettingTabBar tabActive={this.props.tabActive} />
</div>
);
}
}
儿童成分的孩子 SettingTabBar :
export default class SettingTabBar extends React.Component {
constructor(props) {
super(props);
this.state = { activeTab: this.props.tabActive };
}
render() {
if (location.pathname.indexOf('setting') > 0) {
return (
<Tabs activeTab={this.state.activeTab} onChange={tabId => this.setState({ activeTab: tabId })} ripple>
<Tab>SETTING</Tab>
<Tab>CHARTS</Tab>
<Tab>HELP</Tab>
</Tabs>
);
}
return null;
}
}
无论如何,当onChange时,SettingTabBar组件可以通过函数 setTabActive() 将数据更新到App / Header组件?
1 回答
对于与祖父母和孙子女的交流,您可以使用上下文 . 它没有被推荐,但它正在发挥作用 .