流星，流路由器和React：如何使FlowRouter.subsReady（）函數在渲染中具有反應性

Question

我正在嘗試創建一種模式，以便在加載主頁之前所有訂閱都已准備就緒。 類似於Iron Router waitOn。

看一下這個react組件：

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()幫助器來呈現頁面或加載文本。

問題在於這不是反應性的。 訂閱就緒后，它將僅呈現一次，但不會更新並顯示頁面。

我該如何使它反應？

在React上使用Flow Router的訂閱管理的最佳方法是什么。 我有一個基本布局，想要在加載頁面主頁面之前顯示加載符號。 如果我可以將此功能設為響應式，則應該可以正常工作。

更新：

似乎我必須將輔助程序FlowRouter.subsReady（）附加到get 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>
    );
  }
});

它現在似乎正在工作。 這是這樣做的方法嗎？

Answer 1

您以錯誤的方向訪問了該問題。 當流星與react FlowRouter使用時，您實際上並不需要檢查subsReady的FlowRouter 。 只需安裝mixin ReactMeteorData並正確設置this.data ，它將反應性地呈現Dom 。 在這里更多細節

反應render不是反應性的。 僅當組件的props或state更改時，才重新渲染Dom