我有一个名为 main.js 的组件,所有其他组件都在其中呈现。此外,所有其他组件都有其特定的 navigaitonOptions。但是,当我在 main.js 中渲染这些组件时,我无法获取它们的 navigationOptions 并使用它们的 navigationOptions 渲染导航 header 。所以问题是,我如何将子组件的 navigationOptions 变量传递给父组件并用子组件的 navigationOptions 覆盖父组件?
我尝试将导航属性传递给子组件并使用 setParams 函数设置参数,但它不起作用。
showTab() {
switch (this.state.activeTab) {
case 'NewsRouter':
return <News navigation={this.props.navigation} />;
break;
case 'MenuRouter':
return <Menu navigation={this.navigationOptions} />;
break;
case 'CalendarRouter':
return <Calendar navigation={this.navigationOptions} />;
break;
case 'MoodleRouter':
return <Moodle navigation={this.navigationOptions} />;
break;
case 'CouncilRouter':
return <Council navigation={this.navigationOptions} />;
break;
}
}
我选择了要使用此函数渲染的组件,并在 main.js 的渲染函数中调用此函数
每次按屏幕上渲染的屏幕相关组件的选项卡栏时,我希望能够获取相关组件的导航选项。如果您能提供任何帮助,我将非常感激。
最佳答案
为父组件提供一个状态 navigationOptions
和一个方法 setNavigationOptions
。然后,子组件将具有属性 setNavigationOptions
,并且子组件可以从 componentDidMount
内调用 this.props.setNavigationOptions(navigationOptions)
。 p>
class Child extends React.PureComponent {
componentDidMount() {
this.props.setNavigationOptions(navigationOptions);
}
...
}
class Parent extends React.PureComponent {
constructor() {
super();
this.state = { navigationOptions: [] };
}
render() {
return (
<React.Fragment>
<Navigation options={this.state.navigationOptions}/>
<Child setNavigationOptions={this.setNavigationOptions}/>
</React.Fragment>
);
}
setNavigationOptions = (navigationOptions) => {
this.setState({ navigationOptions });
}
}
关于javascript - 如何在子组件中修改父组件的navigationOptions?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51440894/