reactjs - 我可以在 React 应用程序中使某个函数全局可用吗？

Question

以 prop 的形式从根组件 A 传递到子组件 B 是一种常见的做法，该函数将更改 A 的状态。像这样：

class App extends React.Component {
   constructor(props) {
    super(props);
    this.state = {
      name: 'foo'
    };
    this.handleNameChange = this.handleNameChange.bind(this);
  }

  render() {
    return (<NameChanger name={this.state.name} onNameChange={this.handleNameChange} />)
  }

  handleNameChange: function(newName) {
    this.setState({
      name: newName
    });
  }
}

现在你可以看到NameChanger它只下降了一层，所以那里不是一个大问题。但是，如果它已经下降了 3 甚至 4 级呢？我们不得不将它传递到组件链中，这让我很困扰。有没有办法让应用程序中的功能全局可用？

我查看了Context（https://reactjs.org/docs/context.html），但我不确定它是否是全局可用功能的正确设计选择。或者是吗？

谢谢

标签： reactjs

Answer 1

尝试使用 Redux 或 Mobx（非常容易上手）作为状态管理库来解决这个问题。