Question

任何人都可以帮忙...

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

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

但我想这样做 -

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

但是道具似乎并没有出现在混音中。我也尝试将它转移到一个函数：

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的商店和方法。您可以使用更通用的＆Ref.93.ListenerMixin＆＃39;并将其与听众在“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()); };

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

2 个答案: