0

我正在尝试创建一个模式，以便在加载主页之前准备好所有订阅。类似于 Iron Router waitOn。

看看这个反应组件：

export const PageContainer = React.createClass({
  render() {
    return (
      <div id="content-box">
        <div className="banner banner-primary">
          <div className="page_title pull-left">
            {this.props.pageName}
          </div>
        </div>
        <div>
          {  FlowRouter.subsReady() ? this.props.page : (
               <div> Loading .... </div>
            )
          }
        </div>
      </div>
    );
  }
});

如您所见，我正在使用FlowRouter.subsReady()帮助程序来呈现页面或加载文本。

问题是这不是被动的。它只呈现一次，但在订阅准备好后不会更新和显示页面。

我怎样才能让它变得被动？

将 Flow Router 的订阅管理与 React 结合使用的最佳方式是什么？我有一个基本布局，想在加载主页面之前显示加载标志。如果我能让这个函数具有反应性，它应该可以正常工作。

更新：

看来我必须将助手 FlowRouter.subsReady() 附加到获取 Meteor 数据函数

export const PageContainer = React.createClass({
  mixins: [ ReactMeteorData ],
  getMeteorData() {
    return {
      isLoading: FlowRouter.subsReady()
    }
  },
  render() {
    return (
      <div id="content-box">
        <div className="banner banner-primary">
          <div className="page_title pull-left">
            {this.props.pageName}
          </div>
          <i className="fa fa-question-circle help-icon pull-right"></i>
        </div>
        <div>
          { this.data.isLoading  ? this.props.page : (
               <div> Loading ... </div>
            )
          }
        </div>
      </div>
    );
  }
});

它现在似乎正在工作。这是这样做的方法吗？

4

1 回答 1

0

您以错误的方向访问问题。当使用流星和反应时，subsReady你真的不需要检查。FlowRouter只需安装 mixinReactMeteorData并this.data正确设置，它将反应性地渲染Dom. 更多细节在这里

Reactrender不是反应式的。仅当组件的or更改Dom时才会重新渲染propsstate

于 2016-03-01T04:59:28.997 回答