Question

我认为这是一个微不足道的用例，但我仍然需要掌握Flux和React的各个方面。在我的例子中，我使用的是Reflux和React Router。

我有一个基本组件，显示销售线索的详细信息。使用来自URL参数的潜在客户ID，它会调用我的服务来获取潜在客户：

var React = require('react'),
    Reflux = require('reflux');

var leadStore = require('../stores/lead'),
    actions = require('../actions');

var Lead = React.createClass({
  render : function () {
    var p = this.props.lead;

    return (
      <div>
        <h2>{p.details}</h2>
        <p>{p.description}</p>
      </div>
    );
  }
});

module.exports = React.createClass({
  mixins: [Reflux.connect(leadStore)],

  componentDidMount : function () {
    actions.loadLead(this.props.routeParams.id);
  },

  render : function () {
    if (!this.state.lead) {
      return (
        <Lead lead={this.state.lead} />
      );
    }

    return (
      <div>Loading</div>
    );
  }
});

如果我没有包含条件检查，那么在第一次传递时，渲染方法将触发并启动错误，因为状态中没有任何内容。我可以设置一些默认状态参数，但我最终想做的是显示预加载器。

我采取的方法感觉不对，我想知道这种情况的常见做法是什么？我见过的所有示例都使用默认状态或预加载mixins。我有兴趣了解是否有更好的方法来利用组件生命周期？

Answer 1

除了if（！this.state.lead）if if（this.state.lead）之外它看起来还不错。另一种方式是。

＆＃13;

module.exports = React.createClass({
  mixins: [Reflux.connect(leadStore)],

  componentDidMount : function () {
    actions.loadLead(this.props.routeParams.id);
  },

  render : function () {
    var returnIt;
    if (this.state.lead) {
      returnIt = (<Lead lead={this.state.lead} />);
    } else {
      returnIt = (<div>Loading</div>);
    }
    return (returnIt);
  }
});

＆＃13;

Answer 2

React Wait to Render值得一试。这是一个很小的组件，它将显示一个加载器，直到定义了所有组件的道具，例如我们等待lead数据。有利于保持render干净，简单：

<WaitToRender
  wrappedComponent={Lead}
  loadingIndicator={LoadingComponent}
  lead={this.state.lead} />

您也可以将其用于Lead组件的decorate。

Reflux / React - 使用异步数据管理状态

2 个答案: