【全栈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 进行数据驱动。