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

Question

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

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

.

私はそれが 'comp'要素を私のコンポーネントに置き換えることを理解しています。しかし、私は20個のコンポーネントをロードすると、20のすべてのレンダリングが必要です。ただし、私はすべてをレンダリングしたいだけでなく、私のスパ全体をすべて使用したいだけです。私はDirectorJSルーターを使用しています。ユーザーがログインしているかどうか、および/または特定のリンクに移動しているかに応じて、1つまたは複数のコンポーネントを表示したいだけです。 Reactコンポーネントを示す、または非表示を動的に管理する方法については、情報/例/チュートリアルを見つけることはできません。もっと、私が本当にやりたいことは、クリックされたリンクとそれらの部分でのパーシャルでの部分的なものです。これは可能です。それで、どうやってこれを扱うかもしれませんか？アプリがロードされた初めて20以上のコンポーネントを読み込むことができましたが、部分Aコンポーネントがロードされている場合にのみロードするのを好みます。

Answer 1

最初に、必要なものだけをレンダリングします。追跡するのが簡単で、速いです。

実際に「ページ間を交換」するには、まあ、州/小道具に変数を設定し、そのVARを使用して、必要なものを条件付きにします。あなたが自然に欲しいものを選択的にレンダリングする役割は、親コンポーネントに行きます。これが監督の様々なフィドルです。 http://jsfiddle.net/l7mua/3/

キー部品、in app：

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-guest jSX構文を超えて、あなたは実際にはJavaScriptを使用していることに注意してください。まだ動作しています。反復はまだ動作します。