如何使用組件的道具正確初始化商店

我對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

如何使用組件的道具正確初始化商店

回答

相關問題