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

Building a React component which can be triggered like a function

本文关键字：React 组件 一样 一个 函数 构建      更新时间：2023-09-26

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

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

我知道我可以通过props传入'show'，组件可以决定显示自己，但这意味着每个父组件都需要重新实现道具'show'的2秒超时，将其从真变为假。我希望组件封装这个功能，以便于重用。

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

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

我有你所描述的:通知延迟淡出，等等…

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

collection负责删除前的超时，因为带有按钮的通知不应该在没有用户交互的情况下刷新。

我自己也是一个React新手，所以请对我的建议持保留态度，因为这可能不是最符合React的方法。但是我突然想到，您需要的是组件之间通信的发布/订阅技术的理想候选。也就是说，Notification组件订阅通知请求，而任何需要发出通知的组件都会发布通知请求(将消息等作为数据)。

有很多不同的代码示例和库来处理pub/sub。我用的是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"} );
相关文章：