React （四）— 复杂组件

在本系列的前一节中，我们开始构建我们的第一个 React 组件。在本节中，我们将继续使用App`组件，并开始构建更负责的 UI。

我们可能看到的常见Web元素是用户时间轴。 例如，我们可能有一个应用程序，显示发生事件的历史记录，如Facebook和Twitter等应用程序。

<link href="https://gist.githubusercontent.com/auser/2bc34b9abf07f34f602dccd6ca855df1/raw/40c5e7c8cad4c6920fed940fc31cbb63abd94c29/timeline.css" rel="stylesheet" type="text/css" />
复制代码

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
复制代码

我们可以在单个组件中构建整个 UI。但是，在单个组件中构建整个应用程序并不是一个好主意，因为它可能会变得庞大，复杂且难以测试。

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://www.croop.cl/UI/twitter/images/doug.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>
    )
  }
}
复制代码

拆分

与其将其构建在单个组件中，不如将其拆分成多个组件。

看一下这个组件，整个组件有两个独立的部分：

1. 标题栏
2. 内容

我们可以将组件的内容部分继续分割成更小的独立部分。内容部分有三个不同的项目组件。

容器组件

要构建我们的应用程序，让我们首先构建一个容器来容纳整个应用程序。

这些组件都还不需要特殊的功能，所以它们看起来与 HelloWorld 组件类似，因为它只是一个只有渲染功能的组件。

让我们构建一个 App 容器组件，如下所示：

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

注意，我们在 React 中使用名为 className 的属性而不是 class 。请记住，我们不是直接写 DOM，因此也不是编写 HTML，而是 JSX（即 JavaScript）。

我们使用 className 的原因是 class 在 JavaScript 中是一个保留字。如果我们使用 class ，我们将在控制台得到一个错误。

子组件

当一个组件嵌套在另一个组件中时，它被称为子组件。一个组件可以有多个子组件。然后，使用子组件的组件被称为其父组件。

定义了容器组件之后，我们可以构建 标题栏 和 内容 组件，方法是原始设计中获取源代码并将

源文件放在每个组件中。

例如，标题栏组件看起来像这样，带有容器元素 <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>
    )
  }
}
复制代码

最后，我们可以使用时间轴项编写 内容 组件。 每个时间轴项都封装在一个组件中，具有与之关联的头像，时间戳和一些文本。

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>
    )
  }
}
复制代码

<!-- this is a comment in HTML -->
复制代码

{/* This is a comment in React */}
复制代码

组合在一起

现在我们有了两个子组件，我们可以将 标题栏 和 内容 组件设置为 App 组件的子组件。 然后，我们的 App 组件可以使用这些组件，就好像它们是浏览器内置的HTML元素一样。 我们新的 App 组件，带有标题栏和内容，现在看起来像：

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

完整代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Hello world</title>
  <!-- Script tags including React -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
  <div id="app"></div>
  <script type="text/babel">
    class App extends React.Component {
      render() {
        return (
          <div className="notificationsFrame">
            <div className="panel">
              <Header />
              <Content />
            </div>
          </div>
        )
      }
    }
  
    var mountComponent = document.querySelector('#app');
    ReactDOM.render(<App />, mountComponent);
  </script>
</body>
</html>
复制代码

有了这些知识，我们现在可以编写多个组件，并且可以开始构建更复杂的应用程序。

但是，你可能会注意到这个应用程序没有任何用户交互或自定义数据。事实上，就目前而言，我们的 React 应用程序构建起来并不比简单的 HTML 容易多少。

在下一节中，我们将研究如何使组件更具动态性，并实现数据驱动。