用于向组件添加多个订阅的React mixin
React mixin used to add multiple subscribes to component
我试图使用mixin在我的组件中订阅/取消订阅消息,我有下面的代码,谁能告诉我是否有更好的方法来做到这一点,而不是为每个订阅推送?
update: keep get error, Uncaught TypeError: this。subscribeToChannel不是函数
Thanks in advance
var Icon = require('../partials/Icon');
var React = require('react');
var postal = require('postal');
var basketChannel = postal.channel("basket"),
BasketService = require('../../services/BasketService'),
subscriptionsMixin = require('../mixins/subscriptionToChannelsMixin');
var BasketLauncher = React.createClass({
mixins: [subscriptionsMixin],
render: function() {
return (
<button className="pull-right" onClick={this.props.handleClick}>
<Icon type="user" /> {this.getPeopleCount()} People
</button>
);
},
updateBasketTotal: function() {
BasketService.getBasketTotal(function(data){
this.setState({
selectedPeopleCount: data.TotalMembers
});
}.bind(this));
},
componentDidMount: function() {
var comp = this;
comp.updateBasketTotal();
this.subscribeToChannel(basketChannel,"selectAll",function (data) {
BasketService.selectAll(data.selectAll, function () {
comp.updateBasketTotal();
});
});
this.subscriptions.push(
basketChannel.subscribe("updateBasketCount", function () {
comp.updateBasketTotal();
})
);
this.subscriptions.push(
basketChannel.subscribe("removePersonFromBasket", function (data) {
BasketService.removePerson(data.personId,function(){
comp.updateBasketTotal();
});
})
);
this.subscriptions.push(
basketChannel.subscribe("addPersonToBasket", function (data) {
BasketService.addPerson(data.personId,function(){
comp.updateBasketTotal();
} );
})
);
this.subscriptions.push(
basketChannel.subscribe("addArrayToBasket", function (data) {
BasketService.addPerson(data.arrayToPush,function(){
comp.updateBasketTotal();
} );
})
);
},
getPeopleCount: function(){
return this.state.selectedPeopleCount;
},
getInitialState: function() {
return {
subscriptions: [],
selectedPeopleCount:0
};
},
componentWillMount: function() {
var page = this;
}
});
module.exports = BasketLauncher;
Mixin:
var React = require('react');
var postal = require('postal');
var subscriptionsMixin = {
getInitialState: function() {
return {
subscriptions: []
};
},
componentWillUnmount:function() {
for (i = 0; i < this.subscriptions.length; i++) {
postal.unsubscribe(this.state.subscriptions[i]);
}
},
subscribeToChannel:function(channel,message,callback){
this.state.subscriptions.push(
channel.subscribe(message, callback)
);
}
};
看起来你的mixin缺少导出行
module.exports = subscriptionsMixin;
我不会把本地函数在mixin (componentDidMount…等)。将这些函数保留在类中,并放入内部函数,如"basketChannel"。订阅"。
实际上,我将把订阅对象放在mixin本身中,并将订阅函数附加为原型。
希望有帮助
编辑:Idk如果它是你的问题的根源,但你设置了两次getInitialState,一次在你的mixin和一次在你的类相关文章:
- React重新渲染但未显示正确的组件
- React组件等待所需道具进行渲染
- React中的数据集表示
- Webpack开发服务器和React服务器端渲染
- React Redux错误页面管理
- react.js中的密钥绑定
- 如何在react js中将值从一个组件发送到另一个组件
- React Native通过Navigator将用户输入数据传递到选项卡栏IOS中的组件
- React:按键的性能提升
- 如何在react js中从一个页面导航到另一个页面
- React组件-设置页面标题
- 为react组件传递道具的最佳方式
- 如何使用带有Preact的React路由器
- 使用Jest测试React Native应用程序
- 重置状态导致 React mixin 出现问题
- 在React.js中检测子组件是否具有特定的mixin/方法
- 在一个单独的文件中导出React mixin
- 轮询在React JS mixin中不起作用
- 用于向组件添加多个订阅的React mixin
- React Router 1.0使用Router . transitionto(),不带Navigation mixin