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()ヘルパーを使用してページまたは読み込み中のテキストをレンダリングしています。

問題は、これが反応的でないことです。レンダリングは 1 回だけで、サブスクリプションの準備が整ったときにページを更新して表示することはありません。

これをリアクティブにするにはどうすればよいですか？

Flow Router のサブスクリプション管理を React で使用する最良の方法は何ですか。基本レイアウトがあり、ページのメインをロードする前にロード サインを表示したいと考えています。この関数をリアクティブにすることができれば、問題なく動作するはずです。

アップデート：

get Meteor データ関数にヘルパー 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>
    );
  }
});

それは今働いているようです。これはそれを行う方法ですか？

4

1 に答える 1

0

間違った方向で問題にアクセスしました。React で meteor を使用する場合は、実際にはsubsReadyofを確認する必要はありません。FlowRouterミックスインをインストールして適切にReactMeteorData設定するだけthis.dataで、リアクティブにレンダリングされますDom。詳細はこちら

Reactrenderはリアクティブではありません。コンポーネントのまたはが変更Domされた場合にのみ、 が再レンダリングされます。propsstate

于 2016-03-01T04:59:28.997 に答える