web-dev-qa-db-ja.com

ReactJSコンポーネントを表示/非表示にする方法

ReactJSを学ぼうとしていますが、私を混乱させるのはコンポーネントのレンダリングです。私が見たすべての例はReactコンポーネントクラスを定義し、最後に次のようなものがあります：

React.renderComponent(
  <comp attr="value"" />,
  document.getElementById('comp')
);

'comp'要素が私のコンポーネントに置き換わっていることを理解しています。それは素晴らしいことです。しかし、20個のコンポーネントをロードすると、20個すべてがレンダリングされるようです。ただし、すべてではなく一部のみをレンダリングしたいので、SPA全体ですべてを使用します。 DirectorJSルーターを使用していますが、ユーザーがログインするかどうか、または特定のリンクにアクセスするかどうかに応じて、1つ程度のコンポーネントのみを表示したいと思います。反応コンポーネントの表示または非表示を動的に管理する方法に関する情報/例/チュートリアルが見つからないようです。さらに、私が本当にやりたいのは、クリックされたリンクに応じてパーシャルをロードすることです。これらのパーシャルでは、reactコンポーネントを使用するため、その時点でのみコンポーネントをロード/使用します。これは可能ですか..もしそうなら、私はこれをどのように処理できますか？アプリを最初にロードするときに20以上のコンポーネントを一度ロードすることもできますが、コンポーネントが表示されている部分がロードされた場合にのみロードしたいと思います。

javascriptsingle-page-applicationreactjs
15
user3317868

まず、必要なものだけをレンダリングします。追跡が簡単で、高速です。

実際に「ページ間を入れ替える」には、状態/小道具に変数を設定し、その変数を使用して必要なものを条件付きでレンダリングするのと同じくらい簡単です。必要なものを選択的にレンダリングする役割は、自然に親コンポーネントにあります。ディレクターとの作業フィドルは次のとおりです。 http://jsfiddle.net/L7mua/3/

アプリの重要な部分：

render: function() {
  var partial;
  if (this.state.currentPage === 'home') {
    partial = <Home />;
  } else if (this.state.currentPage === 'bio') {
    partial = <Bio />;
  } else {
    // dunno, your default page
    // if you don't assign anything to partial here, you'll render nothing
    // (undefined). In another situation you'd use the same concept to
    // toggle between show/hide, aka render something/undefined (or null)
  }
  return (
    <div>
      <div>I am a menu that stays here</div>
      <a href="#/home">Home</a> <a href="#/bio">Bio</a>
      {partial}
    </div>
  );
}

HTMLに見えるJSX構文を超えて、実際にはJavaScriptを使用していることに注意してください。条件文は引き続き機能し、反復は引き続き機能します。

27
chenglou