现在,父“application”组件具有处于其状态的用户属性,我将其作为prop传递给子组件：
<Toolbar user={this.state.user} />
<RouteHandler user={this.state.user}/>
(我正在使用react-router).这是有效的,在像这样的只读情况下,并不可怕.但是,我的实际登录表单组件(这是一个路由,并且将在RouteHandler中),需要一些方法来“设置”新的用户数据,所以我还需要传递一些回调：
<RouteHandler onAuthenticated={this.setUser} user={this.state.user}/>
这不是一个大问题,除了现在这个方法可用于RouteHandler处理的每个“路由”.
我一直在阅读,似乎唯一的选择是EventEmitter或Dispatch风格的系统.
有没有更好的方法让我失踪？一个事件发射器/调度器系统是值得使用的,当一个应用程序真的只有一两个用途这么小？
解决方法
其他非常相似但功能更强大的选项是使用DI容器 – 将您的反应组件定义为DI容器中的服务,并依赖于其他服务,例如用户数据.这将更适合于通用(同构)应用程序 – 因为,您将能够轻松地用特定实现替换依赖项,或者您需要为单独的范围创建单独的实例(例如用户会话服务器端).
此外,如果使用这种方法,我建议将纯反应组件与逻辑分开 – 您可以创建单独的纯组件来接收所有数据,并将回调作为道具,而不是在DI容器中创建将包装它并将通过所需的HoC组件数据和回调.
如果你需要DI容器 – 有很多它们,但我会建议看看角度2 di容器,或者如果你想要更简单的东西 – 下面我参考了我的项目,它有非常简单但强大的DI灵感来自角度2 DI(很容易从该项目中提取 – 只需一个文件测试)).
关于通知组件有关更改和组织异步逻辑 – 您仍然需要像EventEmitter这样的东西来通知组件有关更改,并且您需要为组件编写生命周期回调以订阅/取消订阅更新…您可以手动执行或创建mixin或HoC缩短了.
但是从我的角度来看,有更好的方法 – 尝试反应式编程,特别是RxJS.反应非常好.
如果您对连接Rx和React的选项感兴趣 – 请看一下gist https://gist.github.com/zxbodya/20c63681d45a049df3fc,它也可以帮助实现HoC组件并订阅上面提到的EventEmitter.
我有一个项目,旨在创建isomorphic(渲染服务器端,而不是相同的html重用客户端)小部件与反应.
它有DI容器来传递依赖关系,它使用RxJS来管理异步逻辑：
