React (四)— 复杂组件

栏目: 服务器 · 发布时间: 4年前

内容简介:在本系列的前一节中,我们开始构建我们的第一个 React 组件。在本节中,我们将继续使用App`组件,并开始构建更负责的 UI。我们可能看到的常见Web元素是用户时间轴。 例如,我们可能有一个应用程序,显示发生事件的历史记录,如Facebook和Twitter等应用程序。我们可以在单个组件中构建整个 UI。但是,在单个组件中构建整个应用程序并不是一个好主意,因为它可能会变得庞大,复杂且难以测试。

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

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

样式

由于我们在本课程中没有关注 CSS,因此我们也不会书写特定的 CSS来构建时间轴,就像你在屏幕上看到的那样。

但是,我们希望确保你构建的时间轴应用与我们的相似。如果你在代码中包含以下 CSS 在 <link /> 标记中,那么你的时间轴将看起来和我们的很相似,并将使用与我们相同的样式:

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

完整编译好的 CSS 可以在 gist.github.com/auser/2bc34… 找到。

译者注:上述 <link /> 无效,请各位将 github 仓库中 CSS 代码复制到本地

此外,为了使时间轴应用和我们一样,你需要在 Web 应用程序中包含字体。有多种方式可以解决这个问题。最简单的方式是包含下方链接样式:

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

页面上示例的所有代码都可以在 github 仓库 (at 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>
    )
  }
}
复制代码

拆分

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

看一下这个组件,整个组件有两个独立的部分:

  1. 标题栏
  2. 内容

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

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

决定拆分组件的深度更多的是一门艺术而不是科学。这是一项需要你通过经验来培养的技能。

无论如何,开始使用组件的概念来研究应用程序通常是一个好主意。通过将我们的应用程序拆分成组件,可以更轻松的进行测试,并更容易追踪功能的去向。

容器组件

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

这些组件都还不需要特殊的功能,所以它们看起来与 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>
    )
  }
}
复制代码

为了在React组件中编写注释,我们必须将它作为JavaScript中的多行注释放在括号中。

与HTML注释不同,如下所示:

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

React 的注释必须放在括号中:

{/* 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 容易多少。

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


以上所述就是小编给大家介绍的《React (四)— 复杂组件》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

个性化网页设计与鉴赏

个性化网页设计与鉴赏

梁景红 / 西安电子科技大学出版社 / 2003-07-14 / 22.00

本书比较全面地介绍了网页设计应注意的相关问题, 在网页设计基础方面着重讲解了网页框架、页面元素、色彩设计,分析了一些人们容易忽视的细小环节,如页面装饰物、图片、文字、连接等。书中结合实例分析了优秀网页的设计创意思想,可以给读者提供一些启示。书中还介绍了作为网页设计者需要了解的信息管理和技术应用,以及网站VI设计和视觉美学等必要知识,读者可针对各种类别的站点具体实践这些知识,寻找进行网页设计的切入点......一起来看看 《个性化网页设计与鉴赏》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

MD5 加密
MD5 加密

MD5 加密工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具