模态对话框 – 在React Flux中实现模态和通知的最佳方式
|
模态和通知是附加到正文的组件.所以他们的工作与普通组件有所不同.在我的应用程序中,我可以想到实现它们的两种方式,我不知道哪一种更好.
>没有商店 在这种方法中,我创建一个具有create方法的NotificationHelper类.在其中,我创建一个新的容器节点,将其附加到正文,然后调用React.render(,container); 所以任何组件都可以调用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,即使我没有任何通知.
我真的不明白你的问题是怎样的问题.它确实是它应该做的,如果你需要在之后建立,你可以很容易地这样做.通知和其他非真实组件所有者功能是我认为使用助焊剂的最佳原因之一(90％的时间我不建议助焊剂).
通过通知,通知操作创建者将负责在设定的时间段之后创建删除通知操作.您也可以在通知上单击一个x按钮,当单击此按钮时,会创建该操作,而这些按钮将转到存储,如果该项目存在则删除该项目,并且依赖该存储库的任何/所有视图都将更新.当我说任何/所有,我的意思是通知组件可能被隐藏,或者可能有另一种方法来查看应用程序的一个页面上的通知,或者可能有一个简单的计数器与应用程序的任何地方的通知数量. 旁注：不要以一种方式传递元素,使它们可以被多次渲染.如果需要提前指定组件,则通过{component：SuccessNotification,props：props}. （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |