Question

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

更新：不断收到错误，Uncaught TypeError：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缺少导出线

// http://stackoverflow.com/questions/31724863/range-based-for-with-brace-initializer-over-non-const-values
#include<list>
#include<functional>
#include<array>

template<typename T, std:: size_t N>
struct hold_array_of_refs {
    using vec_type = std:: array< std:: reference_wrapper<T>, N >;
    vec_type m_v_of_refs;
    hold_array_of_refs(vec_type && v_of_refs) : m_v_of_refs(std::move(v_of_refs)) { }
    ~hold_array_of_refs() { }
    struct iterator {
        typename vec_type :: const_iterator m_it;
        iterator(typename vec_type :: const_iterator it) : m_it(it) {}
        bool operator != (const iterator &other) {
            return this->m_it != other.m_it;
        }
        iterator& operator++() { // prefix
            ++ this->m_it;
            return *this;
        }
        T& operator*() {
            return *m_it;
        }
    };

    iterator begin() const {
        return iterator(m_v_of_refs.begin());
    }
    iterator end() const {
        return iterator(m_v_of_refs.end());
    }
};

template<typename... Ts>
using getFirstTypeOfPack = typename std::tuple_element<0, std::tuple<Ts...>>::type;


template<typename ...T>
auto ref_range(T&... args) -> hold_array_of_refs< getFirstTypeOfPack<T...> , sizeof...(args)> {
    return {{{ std:: ref(args)... }}}; // Why does clang prefer three levels of {} ?
}

#include<iostream>
int main(void){
    std:: list<int> a,b,c;
    // print the addresses, so we can verify we're dealing
    // with the same objects
    std:: cout << &a << std:: endl;
    std:: cout << &b << std:: endl;
    std:: cout << &c << std:: endl;
    for(auto& l : ref_range(a,b,c)) {
        std:: cout << &l << std:: endl;
        l.sort();
    }
}

Answer 2

我不会将原生函数放在mixi n（componentDidMount ...等）中。将这些函数保留在您的类中，并将内部函数（如“basketChannel.subscribe”）放入mixin中。

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

希望有所帮助

编辑：Idk如果它是你的问题的根源，但你设置了两次getInitialState，一次在你的mixin中，一次在你的课堂上

React mixin用于添加对组件

2 个答案: