【全棧React】第4天: 複雜組件

時間 2019-11-05

原文原文鏈接

本文轉載自：衆成翻譯
譯者：iOSDevLog
連接：http://www.zcfy.cc/article/3817
原文：https://www.fullstackreact.com/30-days-of-react/day-4/react

太棒了，咱們已經構建了第一個組件。如今讓咱們來看一下，開始構建一個更復雜的界面。瀏覽器

React 30天前一章節，咱們開始構建咱們的第一個 React 組件。在本節中，咱們將繼續使用咱們的App 組件，並開始構建一個更復雜的UI。oop

咱們可能會看到一個常見的網頁元素是用戶時間軸。例如，咱們可能會有一個應用顯示事件發生的歷史，如Facebook和Twitter等應用。測試

咱們_能夠_在單個組件中構建整個UI。然而，在單個組件中構建整個應用不是一個好主意，由於它可能很是大，複雜且難以測試。spa

class Timeline extends React.Component {
  render() {
    return (
      <div className="notificationsFrame">
        <div className="panel">
          <div className="header">

            <div className="menuIcon">
              <div className="dashTop"></div>
              <div className="dashBottom"></div>
              <div className="circle"></div>
            </div>

            <span className="title">Timeline</span>

            <input
              type="text"
              className="searchInput"
              placeholder="Search ..." />

            <div className="fa fa-search searchIcon"></div>
          </div>
          <div className="content">
            <div className="line"></div>
            <div className="item">

              <div className="avatar">
                <img 
                alt='doug'
                src="http://p0.qhimg.com/t01e9226cd16ce24fb4.jpg" />
              </div>

              <span className="time">
                An hour ago
              </span>
              <p>Ate lunch</p>
            </div>

            <div className="item">
              <div className="avatar">
                <img
                  alt='doug' src="http://www.croop.cl/UI/twitter/images/doug.jpg" />
              </div>

              <span className="time">10 am</span>
              <p>Read Day two article</p>
            </div>

            <div className="item">
              <div className="avatar">
                <img
                  alt='doug' src="http://www.croop.cl/UI/twitter/images/doug.jpg" />
              </div>

              <span className="time">10 am</span>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            </div>

            <div className="item">
              <div className="avatar">
                <img
                  alt='doug' src="http://www.croop.cl/UI/twitter/images/doug.jpg" />
              </div>

              <span className="time">2:21 pm</span>
              <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            </div>

          </div>
        </div>
      </div>
    )
  }
}

拆分一下

比將其構建在單個組件中更好的作法是，咱們將其分解成多個組件。翻譯

看這個組件，整個大組件有兩個獨立的部分：設計

標題欄
內容

咱們能夠將組件的內容部分劃分紅個別的關注點。內容部份內有3個不一樣的_項目_組件。code

若是咱們想進一步，咱們甚至能夠將標題欄分解成3個組件，_菜單_按鈕，_標題_和_搜索_圖標。若是咱們須要，咱們能夠進一步深刻每個。事件

決定劃分組件的深度比科學更顯得藝術。ip

在任何狀況下，在應用中開始尋找使用的_組件_想法一般是一個好主意。經過將咱們的應用分解成組件，變得更容易測試，更容易跟蹤哪些功能在哪裏。

容器組件

要構建咱們的通知應用，讓咱們開始構建容器來保存整個應用。咱們的容器只是另外兩個組件的包裝器。

這些組件都不須要特殊的功能，它們看起來相似於咱們的 HelloWorld 組件，由於它只是一個具備單個渲染功能的組件。

咱們來構建一個咱們將要調用的_包裝器_組件 App ，它們可能相似於：

class App extends React.Component {
  render() {
    return (
      <div className="notificationsFrame">
        <div className="panel">
          {/* content goes here */}
        </div>
      </div>
    )
  }
}

請注意，咱們使用 React 中調用的屬性 className，而不是 HTML 版本 class。請記住，咱們不是直接寫 DOM，所以不會寫 HTML，而是 JSX（這只是JavaScript）。

咱們使用 className 的緣由 class 是 JavaScript 是一個保留字。

子組件

當組件嵌套在另外一個組件中時，它被稱爲子組件。組件能夠有多個子組件。而後將使用子組件的組件稱爲父組件。

隨着容器組件的定義，咱們能夠創建咱們 title 和 content 基本組件，從咱們最初的設計抓住了源，並把源文件分別到每一個組件。

例如，標題組件包括容器元素 <div className="header"> ，菜單圖標，標題和搜索欄看起來像這樣：

class Header extends React.Component {
  render() {
    return (
      <div className="header">
        <div className="fa fa-more"></div>

        <span className="title">Timeline</span>

        <input
          type="text"
          className="searchInput"
          placeholder="Search ..." />

        <div className="fa fa-search searchIcon"></div>
      </div>
    )
  }
}

最後，咱們能夠 Content 使用時間軸項目編寫組件。每一個時間軸項目被包裝在單個組件中，具備與其相關聯的頭像，時間戳和一些文本。

class Content extends React.Component {
  render() {
    return (
      <div className="content">
        <div className="line"></div>

      {/* Timeline item */}
        <div className="item">
          <div className="avatar">
            <img 
            alt='Doug'
            src="http://www.croop.cl/UI/twitter/images/doug.jpg" />
            Doug
          </div>

          <span className="time">
            An hour ago
          </span>
          <p>Ate lunch</p>
          <div className="commentCount">
            2
          </div>
        </div>

        {/* ... */}

      </div>
    )
  }
}

爲了在 React 組件中編寫註釋，咱們必須將其做爲 JavaScript 中的多行註釋放在括號中。

把它們放在一塊兒

如今，咱們有咱們這兩個_子組件_，咱們能夠設置Header和Content組件是App組件的子組件。而後，咱們App 組件能夠使用這些組件，就像它們是瀏覽器內置的 HTML 元素同樣。咱們的新 App 組件包括標題和內容如今看起來像：

class App extends React.Component {
  render() {
    return (
      <div className="notificationsFrame">
        <div className="panel">
          <Header />
          <Content />
        </div>
      </div>
    )
  }
}

有了這些知識，咱們如今有能力編寫多個組件，咱們能夠開始構建更復雜的應用程序。

可是，您可能會注意到此應用沒有任何用戶交互或自定義數據。事實上，正如咱們如今所說的那樣，咱們的React應用程序並不比直接構建不復雜的HTML容易。

在下一節中，咱們將介紹如何使咱們的組件更加動態，並使用 React 進行數據驅動。