Ank*_*kit 13 modal-dialog reactjs reactjs-flux
模态和通知是附加到正文的组件.因此它们与普通组件的工作差别不大.在我的应用程序中,我可以想到实现它们的两种方法,我不确定哪种方法更好.
在这种方法中,我创建了一个具有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,即使此时我没有任何通知.
我真的不明白你的问题怎么是问题。它完全完成了它应该做的事情，如果您以后需要在它的基础上进行构建，您可以轻松地做到这一点。在我看来，通知和其他非真正组件所有者的功能是使用 Flux 的最佳理由之一（90% 的情况下我不推荐 Flux）。
通过 Flux，通知操作创建者将负责在设定的时间段后创建删除通知操作。您还可以在通知上有一个x按钮，单击该按钮会创建该操作，并且这些按钮会转到商店，该商店会删除该项目（如果存在）以及依赖于该商店更新的任何/所有视图。当我说任何/全部时，我的意思是通知组件可能被隐藏，或者可能有另一种方法可以在应用程序的一个页面上查看通知，或者可能有一个简单的计数器，其中包含应用程序中任何位置的通知数量。
旁注：不要以可以多次渲染的方式传递元素。{component: SuccessNotification, props: props}如果您需要提前指定组件，请改为传递。
| 归档时间： |
|
| 查看次数： |
5098 次 |
| 最近记录： |