Question

到目前为止，我在使用React时已经多次遇到过这个问题，但还没有找到解决方案。

假设我们有一个<Notification>组件，它会在页面顶部显示一条消息。我希望能够在组件上调用show()，这将触发2秒的“消息”显示，然后在这2秒后隐藏组件。所有这些功能都将使用CSS和JS超时封装在组件中。

我知道我可以通过道具传递'show'并且组件可以决定展示自己，但这意味着每个父组件都需要重新实现一个2秒的道具'show'超时，翻转它从真实到虚假。我希望该组件封装此功能以便于重复使用。

或者，为<Notification>配备该功能，然后快速传递<Notification show={true}/>然后<Notification show={false}/>可以正常工作，但它感觉不对，因为它仍然是每个父母处理实现一遍又一遍。

也许以上不能通过'React思维方式'来实现，因为在可能的情况下组件是'虚拟'是优选的，但这是我真正想用React实现的。

Answer 1

我完全按照你的描述：延迟淡出的通知等等......

我的工作方式是拥有一个集合，向集合添加通知，组件监听集合并使用这些条目呈现自己。

该集合负责删除之前的超时，即在没有用户交互的情况下不应刷新带按钮的通知这一事实。

Answer 2

我自己就是一个React新手，所以请用一点点盐来表达我的建议，因为这可能不是React-y最常用的做法。但令我印象深刻的是，您需要的是组件之间通信的发布/订阅技术的理想候选者。也就是说，您的通知组件订阅通知请求，并且任何需要发出通知的内容都会发布通知请求（将消息等作为数据）。

有很多不同的代码示例和库用于处理pub / sub。我使用过Arbiter.js，它看起来干净简洁而且很有效。您要做的是在＆＃39; componentWillMount＆＃39;中设置您的订阅。并取消订阅＆＃39; componentWillUnmount＆＃39;。像这样......

componentWillMount: function () {
    this.pubsubToken = Arbiter.subscribe('notification',function(message) {

        this.doNotification(message);
    }.bind(this));
},

componentWillUnmount: function () {
    Arbiter.unsubscribe(this.pubsubToken);
},

doNotification: function(message){
//do whatever here

}

然后，任何需要发出通知的组件都会执行此操作：

Arbiter.publish("notification", {"message":"blah"} );

构建一个可以像函数一样触发的React组件

2 个答案: