React mixin 用于向组件添加多个订阅

Question

我正在尝试使用 mixin 来订阅/取消订阅我的组件中的消息，我有以下代码，谁能告诉我是否有更好的方法来执行此操作而不是推送每个订阅？

更新：不断出现错误，未捕获类型错误：this.subscribeToChannel 不是函数

提前致谢

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;

混音：

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)
    );
}
};

Answer 1

我不会将本机函数放在 mixin（componentDidMount ...等）中。将这些函数保留在 class 中，并将 "basketChannel.subscribe" 之类的内部函数放在 mixin 中。

实际上我会将订阅对象放在混合本身中，并将订阅函数作为原型附加。

希望对您有所帮助

编辑：不知道这是不是你的问题的根源，但你设置了两次 getInitialState，一次是在你的 mixin 中，一次是在你的 class

Answer 2

您的 mixin 似乎缺少导出行

module.exports = subscriptionsMixin;

React mixin 用于向组件添加多个订阅

React mixin used to add multiple subscribes to component

javascript

publish-subscribe

reactjs