Question

我有一个React应用，以不同的路线呈现不同的组件

--App
 |-view1
    |-child component1_1
    |-child component1_2
 |-view2
    |-child component2_1
    |-child component2_2
 |-Toggle

在主视图中有一个切换按钮，我要设置为：

如果启用，则两个路径中的某些子代（）。我的应用程序中的所有操作都将使用API_URL_1，否则，将使用API_URL_2。

App.js：

render(){
    return(
         .... 
         <Route path="/path_1" component={Component1}>
         <Route path="/path_2" component={Component2}>
         .....
         <Toggle onChange={this.changeToggle()} />
    )
}

React Context是一种方法，但是我觉得对于一个全局变量来说太复杂了。有没有更简单的方法？

Toggle的状态保留在应用程序中，因此我想将此Toggle的状态传递给path1的某些子代和path2的某些子代。

谢谢

Answer 1

可以通过上下文提供分布在不同嵌套级别上的多个组件的全局应用程序状态。这是一个有效的用例。

另一个可能更好的解决方案是首先不给组件一个url。您可能有一个执行api请求的专用服务模块，该模块公开了切换两个端点的功能。它会跟踪当前使用的端点。

这样，组件无需了解端点本身。他们只是将服务导入并在其上调用函数至1.发出请求和2.切换端点。

这不会污染全局名称空间，因为当前使用的URL在服务模块中是本地的，不能直接进行更改。

如何通过react app的UI为两个视图设置变量？

1 个答案: