javascript - 如何在子组件中修改父组件的navigationOptions？

Question

我有一个名为 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 的渲染函数中调用此函数

每次按屏幕上渲染的屏幕相关组件的选项卡栏时，我希望能够获取相关组件的导航选项。如果您能提供任何帮助，我将非常感激。

Answer 1

为父组件提供一个状态 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 });
  }
}