构建一个可以像函数一样触发的React组件
到目前为止，我在使用React时已经多次遇到这个问题，还没有找到解决方案。
假设我们有一个<Notification>组件，它在页面顶部显示一条消息。我希望能够在组件上调用show()，这将触发2秒的'Message‘显示，然后在这2秒后隐藏组件。所有这些功能都将使用CSS和JS超时封装在组件中。
我知道我可以通过props传入' show '，组件可以决定显示自己，但这意味着每个父组件都需要重新实现prop 'show‘的2秒超时，将其从true转换为false。我希望组件封装此功能以便于重用。
或者，给<Notification>配备该功能，然后快速传入<Notification show={true}/>，然后在<Notification show={false}/>之后快速传递，这可能会起作用，但感觉就是不正确，因为它仍然是每个父级一遍又一遍处理实现。
也许以上这些无法通过“React的思维方式”来实现，因为在可能的情况下，最好是组件是“虚拟的”，但这是我真的想用React来实现的。
回答 2
Stack Overflow用户
发布于 2015-09-17 19:07:20
我有你所描述的:延迟淡出的通知，等等。
我让它工作的方式是有一个集合，向集合添加通知，组件侦听集合并使用这些条目呈现自己。
集合负责删除之前的超时，这是因为在没有用户交互的情况下，不应该刷新带有按钮的通知。
Stack Overflow用户
发布于 2015-09-17 21:38:19
我自己是一个反应新手，所以对我的建议持保留态度，因为这可能不是最反应的方式。但我突然意识到，您所需要的是组件间通信的发布/订阅技术的理想候选者。也就是说，您的Notification组件订阅通知请求，任何需要发出通知的组件都会发布一个通知请求(带有消息等，作为数据)。
有许多不同的代码示例和库可用于处理发布/订阅。我使用过Arbiter.js，它看起来干净、简单，而且工作正常。你要做的就是在'componentWillMount‘中设置你的订阅，在'componentWillUnmount’中取消订阅。就像这样..。
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"} );https://stackoverflow.com/questions/32628789
复制相似问题
腾讯云开发者
