如何使用组件的道具正确初始化商店

我对React/Reflux事物比较陌生，所以如果这是一个愚蠢的问题，请原谅我。我有一个React组件，我想在应用程序中多次使用它。我想用道具初始化这个组件的状态。如何使用Reflux组件的道具来设置我店铺的初始状态？我在ReactJS文档中看到，它可能是反模式，但我认为在我的情况下不是。如何使用组件的道具正确初始化商店

我试过了下面的代码，但是因为我在ComponentDidMount函数上设置了一个新状态，所以它渲染了我的组件两次。

我不知道如何在初始化时将我的组件的道具传递给我的商店。

父组件：

var ParentComponent = React.createClass({ 

    render: function(){ 
    return (
     <div className="parent-component"> 
     <OrderComponent order={parent.order} /> 
     </div> 
    ); 
    } 
});

我的组件：

var OrderComponent = React.createClass({ 
    mixins: [Reflux.connect(OrderStore, "order")], 

    componentDidMount: function(){ 
    OrderActions.update(this.props.order); 
    }, 
    ... 
    render: function(){ 
    <div>{this.state.order}</div> 
    } 
})

我的店：

var OrderStore = Reflux.createStore({ 
    listenables: [OrderActions], 

    onUpdate: function(order){ 
    this.update(order); 
    }, 

    ... 

    update: function(order){ 
    this.order = order; 
    this.trigger(order); 
    } 
});

来源

2015-11-12 lou

要回答你的问题，在你的商店，你可能只是不触发更新。

var OrderStore = Reflux.createStore({ 
    listenables: [OrderActions], 

    onUpdate: function(order, ignoreTrigger){ 
    this.order = order; 
    if (!ignoreTrigger) { 
     this.update(order); 
    } 
    }, 

    ... 

    update: function(order){ 
    this.trigger(order); 
    } 
});

你是对的，这绝对是一种反模式。你的商店应该自行初始化。我建议您在商店中使用init函数来初始化您的订单，以便您的组件可以根据来自您商店的状态进行更新。

来源

2016-07-18 22:08:24 Mitch

如何使用组件的道具正确初始化商店

回答

相关问题