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

React mixin used to add multiple subscribes to component

本文关键字:React mixin 组件 添加 用于      更新时间:2023-09-26

我试图使用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和一次在你的类