14

模态和通知是附加到正文的组件。因此它们的工作方式与普通组件几乎没有什么不同。在我的应用程序中，我可以想到两种实现它们的方法，但我不确定哪一种更好。

  1. 没有商店

在这种方法中，我创建了一个具有 create 方法的 NotificationHelper 类。在其中，我创建了一个新的容器节点，将其附加到主体，然后调用 React.render(, container);

所以任何组件都可以调用 NotificationHelper.create() 并且它会创建一个通知。管理其生命周期并在计时器到期或有人单击关闭按钮时关闭的通知组件。

问题经常是，我需要在页面上显示通知以响应 XHR 响应（成功或失败），所以在我的 actionCreator 中，我会有这样的代码

APIManager.post(url, postData).then(function(response) {
    NotificationHelper.create(<SuccessNotification />)
});

我不知道从呈现新组件的动作创建者中调用这样的东西是否正确。

  1. 有店铺

另一种方法是创建 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，即使此时我没有任何通知。

4

2 回答 2

1

我真的不明白你的问题是什么问题。它完全按照它应该做的事情做，如果您以后需要在它的基础上进行构建，您可以轻松地做到这一点。在我看来，通知和其他非真实组件所有者功能是使用通量的最佳理由之一（90% 的时间我不推荐通量）。

使用通量，通知操作创建者将负责在设定的时间段后创建删除通知操作。您还可以在通知上设置一个x按钮，单击该按钮会创建该操作，这些按钮会转到商店，该商店会删除该项目（如果存在），以及任何/所有取决于此商店更新的视图。当我说任何/全部时，我的意思是通知组件可能被隐藏，或者可能有另一种方法可以在应用程序的一个页面上查看通知，或者可能有一个简单的计数器，显示应用程序中任何位置的通知数量。

旁注：不要以可以多次渲染的方式传递元素。{component: SuccessNotification, props: props}如果您需要提前指定组件，请改为通过。

于 2014-12-18T02:39:54.427 回答
0

我遵循 FakeRainBrigand 的回答。

很抱歉在这里自我推销，但我创建了一个通知组件，您可以将其与 Flux 一起使用。在这里，您可以看到一个显示 Alt 用法示例的问题，但原理是相同的。您将组件添加到 HTML 上的顶级元素并将该组件订阅到通知存储。在您的通知操作创建器上，您可以添加具有一些属性的通知，例如：级别、位置、自动关闭、操作等。

这是组件演示。

于 2015-09-14T15:40:18.527 回答