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

Question

我有一个名为main.js的组件，其中所有其他组件都在其中呈现。此外，所有其他组件都有其特定的navigaitonOptions。但是，当我在main.js中渲染这些组件时，我无法使用它们的navigationOptions并使用其navigationOptions渲染导航头。所以问题是，我如何才能将子组件的navigationOptions变量带到父组件，并用子组件的NavigationOptions覆盖父组件呢？

我试图将导航道具传递给子组件，并使用setParams函数设置参数，但这没有用。

Element should be disabled {input[type="text"]}
Element: '<input class="col-md-8 col-sm-12 col-xs-12 with-tooltip ng-untouched ng-pristine ng-invalid" formcontrolname="identifier" placeholder="e.g. "America" type="text"></input>'
Actual value: enabled

}

我选择了要使用此函数渲染的组件，并在main.js的render函数中调用了此函数

每按一次在屏幕上呈现的屏幕相关组件的选项卡上，我就希望能够获取相关组件的navigationOptions。对于任何帮助，我都将非常感激。

Answer 1

给父组件一个状态navigationOptions和一个方法setNavigationOptions。然后，Child组件将具有属性setNavigationOptions，Child组件可以从this.props.setNavigationOptions(navigationOptions)内部调用componentDidMount。

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 });
  }
}

Answer 2

尝试将其设置为全局navigationOptions