模态和通知是附加到正文的组件.因此它们与普通组件的工作差别不大.在我的应用程序中,我可以想到实现它们的两种方法,我不确定哪种方法更好.
在这种方法中,我创建了一个具有create方法的NotificationHelper类.在其中,我创建一个新的容器节点,将其附加到正文,然后调用React.render(,容器);
因此,任何组件都可以调用NotificationHelper.create(),它将创建一个通知.通知组件管理它的生命周期,并在计时器到期或有人点击关闭按钮时关闭.
问题往往是,我需要在页面上显示响应XHR响应(成功或失败)的通知,所以在我的actionCreator中,我将有这样的代码
APIManager.post(url, postData).then(function(response) {
NotificationHelper.create(<SuccessNotification />)
});
我不知道从渲染新组件的动作创建者那里调用这样的东西是否正确.
其他方法是创建NotificationStore并在emitChange上呈现通知组件.代码看起来像这样
在我的App.js中,代码将是
<body>
<Header />
<Fooder />
<NotificationContainer />
</body>
然后在NotificationContainer中我会做类似的事情
onChange: function() {
this.setState({customNotification: NotificationStore.get()});
},
render: function() {
<Notification>
{this.state.customNotification}
</Notification>
}
最后,动作创建者会看起来像
Dispatcher.dispatch({
actionType: 'notification',
component: <MyComponent/>
});
这种方法的问题是商店的额外开销.商店在这里没有做任何有意义的事情,它只是为了追随变化.从动作创建者,我们将数据传递到商店,组件再次从商店获取相同的数据并进行渲染.因此,我们完成了通量循环而没有真正从中获得任何东西.
此外,我现在需要在我的应用程序开始时初始化NotificationContainer,即使此时我没有任何通知.