Question

通常的做法是将prop的形式从根组件A传递到子组件B，该子组件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），但不确定对于全球可用的功能，它是否是正确的设计选择。是吗？

谢谢

Answer 1

在典型的React应用程序中，数据是自上而下传递的（对于儿童）通过道具，但这对于某些类型的许多人需要的道具（例如语言环境偏好设置，UI主题）应用程序中的组件。上下文提供了一种共享方式无需显式传递组件之间类似这些值穿过树的每一层的道具。

https://reactjs.org/docs/context.html

Answer 2

尝试使用Redux或Mobx（非常容易入门）作为状态管理库来解决此问题。

我可以在React应用程序中使某个功能全局可用吗？

2 个答案: