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

Question

任何人都可以帮忙...

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

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

但我想这样做 -

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

但是 props 在 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，只听两个商店并相应地映射您的数据。

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

Answer 2

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

您不需要定义应用 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() {

    }
});

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

How can I change the reflux listenTo mixin based on a prop in a react.js component

jsx

reactjs

refluxjs