如何根据 react.js 组件中的道具更改回流listenTo mixin

Question

谁能帮忙解决这个问题...

我有这个列表组件，我希望能够切换不同的数据存储（在 props 中定义）

mixins:[Reflux.listenTo(RecentPupilsStore, 'onChange')],

但我想这样做 -

mixins:[Reflux.listenTo(this.props.store, 'onChange')],

但在 mixin 中似乎没有可用的道具。我也尝试将其转移到函数中：

mixins:[Reflux.listenTo(this.setStore(this.props.store), 'onChange')],
setStore: function(store){
    if(store == 'RecentPupilsStore') { return RecentPupilsStore; }
},

任何帮助表示赞赏。相当新的 ot 反应，但试图使其尽可能可重用！

EG：我想包含这样的组件：

<FilterList data="pupils" />
<FilterList data="groups" />

等 - 这些会查看这些商店。

Answer 1

我不会说这是最好的解决方案，但它回答了您关于如何使用道具定义要收听的商店名称的问题。

您不需要定义应用 Mixin 的商店和方法。您可以使用更通用的 'Reflux.ListenerMixin' 并将其与在 'ComponentDidMount' 中的监听器注册相结合。

var MyComponent = React.createClass({
    mixins: [Reflux.ListenerMixin],
    // Lifecycle events
    componentDidMount: function() {
        var theStore = defineTheStore(this.props.data);
        this.listenTo(theStore, this.onChange);
    },
    render: function() {
        return(
            <div >
                ....
            </div>
        );
    },
    onChange: function() {

    }
});

Answer 2

我会继续使用 mixin，只听两个商店并相应地映射您的数据。

componentDidMount = () => {
    // console.log('AppCtrl componentDidMount');
    this.unsubscribeApp = AppStore.listen(this.appStoreDidChange);
    this.unsubscribeGS = GenusSpeciesStore.listen(this.gsStoreDidChange);
};
componentWillUnmount = () => {
    this.unsubscribeApp();
    this.unsubscribeGS();
};
appStoreDidChange = () => {
    this.setState(getAppState());
};
gsStoreDidChange = () => {
    this.setState(getGsState());
};