如何顯示/隱藏 ReactJS 組件

Question

正在嘗試學習 ReactJS .. 但讓我感到困惑的是組件的渲染。 我見過的每個例子都定義了一個 React 組件類，最后有類似的東西：

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

我知道它用我的組件替換了 'comp' 元素.. 太好了。 但似乎如果我加載 20 個組件，所有 20 個渲染。 但是，我只想渲染一些而不是全部，而是在整個 SPA 中使用所有。 我正在使用 DirectorJS 路由器，並且根據用戶是否登錄和/或轉到某些鏈接，我只想顯示一個或多個組件。 我似乎找不到任何關於如何動態管理顯示或隱藏 React 組件的信息/示例/教程。 更重要的是，我真正想做的是根據點擊的鏈接加載部分，在這些部分中他們會使用反應組件，所以只有在那個時候加載/使用組件。 這可能嗎..如果是這樣，我該如何處理？ 我可以忍受在第一次加載應用程序時加載 20 多個組件，但我更喜歡僅在加載了顯示組件的部分時加載它們。

Answer 1

首先，僅渲染必要的內容。 跟蹤更容易，速度也更快。

要真正“在頁面之間交換”，就像在您的狀態/道具中設置一個變量一樣簡單，並使用該變量有條件地呈現您需要的任何內容。 有選擇地渲染任何你想要的東西的角色自然地交給了父組件。 這是導演的工作小提琴： 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 {
    // I don't know, 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。 條件仍然有效，迭代仍然有效，等等。