Question

我对React / Reflux的事情比较新，如果这是一个愚蠢的问题，请原谅我。我有一个React组件，我想在我的应用程序中多次使用。我想用props初始化这个组件的状态。如何使用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);
  }
});

Answer 1

要回答您的问题，您可以在商店中触发更新。

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功能初始化您的订单，以便您的组件可以根据您商店的状态进行更新。

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

1 个答案: