流星，流路由器和反应：如何让FlowRouter.subsReady（）函数在呈现中被反应

Question

我想创建一个模式，以便在加载主页之前准备好所有的订阅。类似于铁路路由器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的最佳方式是什么？我有一个基础布局，并希望在加载页面主之前显示加载符号。如果我能让这个功能被反应，它应该工作得很好。

UPDATE：

好像我有助手，FlowRouter.subsReady（）连接到获取流星数据功能

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> 
    ); 
    } 
}); 

这似乎是现在的工作。这是做到这一点的方式吗？

Answer 1

您以错误的方向访问了问题。当使用流星进行反应时，您并不需要检查subsReady的FlowRouter。只需安装mixin ReactMeteorData并正确设置this.data，它会反应性渲染Dom。更多详情here

反应render没有反应。 Dom仅在组件的props或state更改时才会重新渲染