【全栈React】第4天: 复杂组件

前端之家收集整理的这篇文章主要介绍了【全栈React】第4天: 复杂组件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文转载自:众成翻译
译者:iOSDevLog
链接http://www.zcfy.cc/article/3817
原文:https://www.fullstackreact.com/30-days-of-react/day-4/

太棒了,我们已经构建了第一个组件。现在让我们来看一下,开始构建一个更复杂的界面。

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

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

我们_可以_在单个组件中构建整个UI。然而,在单个组件中构建整个应用不是一个好主意,因为它可能非常大,复杂且难以测试。

  1. class Timeline extends React.Component {
  2. render() {
  3. return (
  4. <div className="notificationsFrame">
  5. <div className="panel">
  6. <div className="header">
  7.  
  8. <div className="menuIcon">
  9. <div className="dashTop"></div>
  10. <div className="dashBottom"></div>
  11. <div className="circle"></div>
  12. </div>
  13.  
  14. <span className="title">Timeline</span>
  15.  
  16. <input
  17. type="text"
  18. className="searchInput"
  19. placeholder="Search ..." />
  20.  
  21. <div className="fa fa-search searchIcon"></div>
  22. </div>
  23. <div className="content">
  24. <div className="line"></div>
  25. <div className="item">
  26.  
  27. <div className="avatar">
  28. <img
  29. alt='doug'
  30. src="http://p0.qhimg.com/t01e9226cd16ce24fb4.jpg" />
  31. </div>
  32.  
  33. <span className="time">
  34. An hour ago
  35. </span>
  36. <p>Ate lunch</p>
  37. </div>
  38.  
  39. <div className="item">
  40. <div className="avatar">
  41. <img
  42. alt='doug' src="http://www.croop.cl/UI/twitter/images/doug.jpg" />
  43. </div>
  44.  
  45. <span className="time">10 am</span>
  46. <p>Read Day two article</p>
  47. </div>
  48.  
  49. <div className="item">
  50. <div className="avatar">
  51. <img
  52. alt='doug' src="http://www.croop.cl/UI/twitter/images/doug.jpg" />
  53. </div>
  54.  
  55. <span className="time">10 am</span>
  56. <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  57. </div>
  58.  
  59. <div className="item">
  60. <div className="avatar">
  61. <img
  62. alt='doug' src="http://www.croop.cl/UI/twitter/images/doug.jpg" />
  63. </div>
  64.  
  65. <span className="time">2:21 pm</span>
  66. <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>
  67. </div>
  68.  
  69. </div>
  70. </div>
  71. </div>
  72. )
  73. }
  74. }

拆分一下

比将其构建在单个组件中更好的做法是,我们将其分解成多个组件。

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

  1. 标题
  2. 内容

我们可以将组件的内容部分划分成个别的关注点。内容部分内有3个不同的_项目_组件。

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

决定划分组件的深度比科学更显得艺术。

在任何情况下,在应用中开始寻找使用的_组件_想法通常是一个好主意。通过将我们的应用分解成组件,变得更容易测试,更容易跟踪哪些功能在哪里。

容器组件

要构建我们的通知应用,让我们开始构建容器来保存整个应用。我们的容器只是另外两个组件的包装器

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

我们来构建一个我们将要调用的_包装器_组件 App ,它们可能类似于:

  1. class App extends React.Component {
  2. render() {
  3. return (
  4. <div className="notificationsFrame">
  5. <div className="panel">
  6. {/* content goes here */}
  7. </div>
  8. </div>
  9. )
  10. }
  11. }

请注意,我们使用 React 中调用属性 className,而不是 HTML 版本 class。请记住,我们不是直接写 DOM,因此不会写 HTML,而是 JSX(这只是JavaScript)。

我们使用 className 的原因 classJavaScript 是一个保留字。

子组件

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

随着容器组件的定义,我们可以建立我们 titlecontent 基本组件,从我们最初的设计抓住了源,并把源文件分别到每个组件。

例如,标题组件包括 容器元素 <div className="header">菜单图标,标题搜索栏 看起来像这样:

  1. class Header extends React.Component {
  2. render() {
  3. return (
  4. <div className="header">
  5. <div className="fa fa-more"></div>
  6.  
  7. <span className="title">Timeline</span>
  8.  
  9. <input
  10. type="text"
  11. className="searchInput"
  12. placeholder="Search ..." />
  13.  
  14. <div className="fa fa-search searchIcon"></div>
  15. </div>
  16. )
  17. }
  18. }

最后,我们可以 Content 使用时间轴项目编写组件。每个时间轴项目被包装在单个组件中,具有与其相关联的头像,时间戳和一些文本。

  1. class Content extends React.Component {
  2. render() {
  3. return (
  4. <div className="content">
  5. <div className="line"></div>
  6.  
  7. {/* Timeline item */}
  8. <div className="item">
  9. <div className="avatar">
  10. <img
  11. alt='Doug'
  12. src="http://www.croop.cl/UI/twitter/images/doug.jpg" />
  13. Doug
  14. </div>
  15.  
  16. <span className="time">
  17. An hour ago
  18. </span>
  19. <p>Ate lunch</p>
  20. <div className="commentCount">
  21. 2
  22. </div>
  23. </div>
  24.  
  25. {/* ... */}
  26.  
  27. </div>
  28. )
  29. }
  30. }

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

把它们放在一起

现在,我们有我们这两个_子组件_,我们可以设置HeaderContent组件是App组件的子组件。然后,我们App 组件可以使用这些组件,就像它们是浏览器内置的 HTML 元素一样。我们的新 App 组件包括标题内容现在看起来像:

  1. class App extends React.Component {
  2. render() {
  3. return (
  4. <div className="notificationsFrame">
  5. <div className="panel">
  6. <Header />
  7. <Content />
  8. </div>
  9. </div>
  10. )
  11. }
  12. }

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

但是,您可能会注意到此应用没有任何用户交互或自定义数据。事实上,正如我们现在所说的那样,我们的React应用程序并不比直接构建不复杂的HTML容易。

在下一节中,我们将介绍如何使我们的组件更加动态,并使用 React 进行 数据驱动。

猜你在找的React相关文章