30天入坑React ---------------day04 Complex Components

最新推荐文章于 2024-08-10 08:07:24 发布

小李科技

最新推荐文章于 2024-08-10 08:07:24 发布

阅读量292

点赞数

分类专栏： React React入门30天

React 同时被 2 个专栏收录

68 篇文章 1 订阅

订阅专栏

React入门30天

30 篇文章 4 订阅

订阅专栏

这篇文章是30天React系列的一部分。

在本系列中，我们将从非常基础开始，逐步了解您需要了解的所有内容，以便开始使用React。如果您曾经想学习React，那么这里就是您的最佳选择！

下载免费的PDF

30天的React Mini-Ebook

复杂组件

在Github上编辑此页面

太棒了，我们已经建立了我们的第一个组件。现在让我们有点发烧友，开始构建一个更复杂的界面。

在30天React的前一节中，我们开始构建我们的第一个React组件。在本节中，我们将继续使用我们的App组件，并开始构建更复杂的UI。

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

样式

由于我们在本课程中没有关注CSS，因此我们并没有涵盖特定的CSS来构建时间轴，就像您在屏幕上看到的那样。

但是，我们希望确保您构建的时间轴看起来与我们的相似。如果您<link />在代码中包含以下CSS作为标记，那么时间轴看起来类似，并且将使用我们使用的相同样式：
<link href="https://gist.githubusercontent.com/auser/2bc34b9abf07f34f602dccd6ca855df1/raw/40c5e7c8cad4c6920fed940fc31cbb63abd94c29/timeline.css" rel="stylesheet" type="text/css" />
并确保将代码包含在具有类的组件中demo（我们有目的地将其保留，因为它与我们在所有演示中使用的完全相同的代码）。查看https://jsfiddle.net/auser/zwomnfwk/以获取一个工作示例。

可以在https://gist.github.com/auser/2bc34b9abf07f34f602dccd6ca855df1的要点上找到整个编译的CSS 。

此外，为了使时间轴看起来与我们在网站上的方式完全一样，您需要在Web应用程序中包含font-awesome。有多种方法可以解决这个问题。最简单的方法是包含链接样式：
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
页面上示例的所有代码都可以在github repo上找到（https://github.com/fullstackreact/30-days-of-react）。

我们可以在单个组件中构建整个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>
    )
  }
}

时间线

打破它

我们不是在单个组件中构建它，而是将其分解为多个组件。

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

标题栏
内容

我们可以将组件的内容部分切割成各个关注的位置。内容部分中有3个不同的项目组件。

如果我们想更进一步，我们甚至可以将标题栏分解为3个组成部分，菜单按钮，标题和搜索图标。如果我们需要，我们可以进一步深入到每一个。

决定拆分组件的深度更多的是艺术而不是科学，而且是您将通过经验开发的技能。

无论如何，使用组件的概念开始查看应用程序通常是个好主意。通过将我们的应用程序分解为组件，可以更轻松地进行测试，并更容易跟踪哪些功能在哪里。

容器组件

要构建我们的通知应用程序，让我们首先构建容器以容纳整个应用程序。我们的容器只是其他两个组件的包装器。

这些组件都不需要特殊功能（因此），因此它们看起来与我们的HelloWorld组件类似，因为它只是一个具有单个渲染功能的组件。

让我们构建一个我们将调用的包装器组件App，它看起来可能类似于：

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

请注意，我们使用classNameReact中调用的属性而不是HTML版本class。请记住，我们不是直接写DOM而是不写HTML，而是JSX（只是JavaScript）。

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

儿童组件

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

随着包装部件的定义，我们可以建立我们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中的多行注释放在括号中。

与HTML注释不同，如下所示：

注释的React版本必须放在括号中：
{/* This is a comment in React */}

把它们放在一起

现在，我们有我们这两个孩子的组件，我们可以设置Header和Content组件是孩子的的App组成部分。App然后，我们的组件可以使用这些组件，就好像它们是内置于浏览器的HTML元素一样。我们的新App组件，标题和内容现在看起来像：

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