AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

第十九章 案例TodoList之组件拆分

2024-01-02 198
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 第十九章 案例TodoList之组件拆分

光说不练假把式，接下来我们将练习一个案例TodoList，让我们熟悉react。

image.png

以上是该案例的静态示例，其功能有：

  • 在输入框输入任务，按回车键新增一个任务项
  • 鼠标移动在单个任务项上面，出现删除按钮
  • 点击删除按钮，可以将当前任务项删除
  • 选中任务项，点击清除已完成任务项，可以将已选中的任务项全部删除
  • 底部实时显示已选中的任务项的数量和全部任务项的数量

静态页面拆分组件

我们可以根据静态页面，根据自己的理解来进行功能组件的拆分。我们在来回顾一下组件的概念：

组件是一种可重用的代码块，它可以被多次使用，而不需要重复编写相同的代码。组件可以是一个函数、一个类或一个模块，它们可以接受输入参数并返回输出结果。

在前端开发中，组件通常指的是 UI 组件，它们是构建用户界面的基本单元。UI 组件可以是按钮、文本框、下拉菜单等等，它们可以被组合在一起形成复杂的用户界面。

image.png

从上图我们可以知道，我们将静态页面拆分成了5个组件：

  • APP组件，是一个容器，其他组件都将引入到这个容器里面
  • header组件，用来添加任务项
  • Item组件，用来展示单个任务项
  • List组件，是一个Item的父组件，可以展示多个任务项
  • footer组件，用来展示已完成和全部的任务项数量，以及删除已完成任务项的功能

使用脚手架展示整体静态页面

我们可以将整体的页面全部写在APP组件里面，然后我们在分析

  • index.css
/*base*/
body {
  background: #fff;
}
.btn {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}
.btn-danger {
  color: #fff;
  background-color: #da4f49;
  border: 1px solid #bd362f;
}
.btn-danger:hover {
  color: #fff;
  background-color: #bd362f;
}
.btn:focus {
  outline: none;
}
.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
/*header*/
.todo-header input {
  width: 560px;
  height: 28px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 7px;
}
.todo-header input:focus {
  outline: none;
  border-color: rgba(82, 168, 236, 0.8);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
/*main*/
.todo-main {
  margin-left: 0px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding: 0px;
}
.todo-empty {
  height: 40px;
  line-height: 40px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding-left: 5px;
  margin-top: 10px;
}
/*item*/
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}
li label {
  float: left;
  cursor: pointer;
}
li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}
li button {
  float: right;
  display: none;
  margin-top: 3px;
}
li:before {
  content: initial;
}
li:last-child {
  border-bottom: none;
}
/*footer*/
.todo-footer {
  height: 40px;
  line-height: 40px;
  padding-left: 6px;
  margin-top: 5px;
}
.todo-footer label {
  display: inline-block;
  margin-right: 20px;
  cursor: pointer;
}
.todo-footer label input {
  position: relative;
  top: -1px;
  vertical-align: middle;
  margin-right: 5px;
}
.todo-footer button {
  float: right;
  margin-top: 5px;
}
  • App.jsx
import React, { Component } from 'react'
import "./index.css"
export default class App extends Component {
  render() {
    return (
      <div className="todo-container">
      <div className="todo-wrap">
        <div className="todo-header">
          <input type="text" placeholder="请输入你的任务名称，按回车键确认"/>
        </div>
        <ul className="todo-main">
          <li style={{backgroundColor: 'gainsboro'}}>
            <label>
              <input type="checkbox"/>
              <span>xxxxx</span>
            </label>
            <button className="btn btn-danger" style={{display:"block"}}>删除</button>
          </li>
          <li>
            <label>
              <input type="checkbox"/>
              <span>yyyy</span>
            </label>
            <button className="btn btn-danger" style={{display:"none"}}>删除</button>
          </li>
        </ul>
        <div className="todo-footer">
          <label>
            <input type="checkbox"/>
          </label>
          <span>
            <span>已完成0</span> / 全部2
          </span>
          <button className="btn btn-danger">清除已完成任务</button>
        </div>
      </div>
    </div>
    )
  }
}
  • 查看效果

image.png

从图可知我们已经将页面显示成功了，需要注意的是：

  • 类名class需要写成className
  • 内联样式style的写法style={{color:'red'}}

拆分组件并编写代码

  • 首先我们先将组件的文件目录建好
components
|----Header
    |----index.css
    |----index.jsx
|----List
    |----index.css
    |----index.jsx
|----Item
    |----index.css
    |----index.jsx
|----Footer
    |----index.css
    |----index.jsx
  • 编写Header组件

index.css

/*header*/
.todo-header input {
  width: 560px;
  height: 28px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 7px;
}
.todo-header input:focus {
  outline: none;
  border-color: rgba(82, 168, 236, 0.8);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}

index.jsx

import React, { Component } from 'react'
import "./index.css"
export default class Header extends Component {
  render() {
    return (
      <div className="todo-header">
          <input type="text" placeholder="请输入你的任务名称，按回车键确认"/>
      </div>
    )
  }
}
  • 编写Item组件

index.css

/*item*/
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}
li label {
  float: left;
  cursor: pointer;
}
li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}
li button {
  float: right;
  display: none;
  margin-top: 3px;
}
li:before {
  content: initial;
}
li:last-child {
  border-bottom: none;
}

index.jsx

import React, { Component } from 'react'
import "./index.css"
export default class Item extends Component {
  render() {
    return (
      <li style={{backgroundColor: 'gainsboro'}}>
            <label>
              <input type="checkbox"/>
              <span>xxxxx</span>
            </label>
            <button className="btn btn-danger" style={{display:"block"}}>删除</button>
      </li>
    )
  }
}
  • 编写List组件

index.css

/*main*/
.todo-main {
  margin-left: 0px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding: 0px;
}
.todo-empty {
  height: 40px;
  line-height: 40px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding-left: 5px;
  margin-top: 10px;
}

index.jsx

import React, { Component } from 'react'
import Item from '../Item'
import "./index.css"
export default class List extends Component {
  render() {
    return (
      <ul className="todo-main">
          <Item/>
      </ul>
    )
  }
}

注意：因为List组件是Item的父组件，所以这里需要将Item组件引入使用

  • 编写Footer组件

index.css

/*footer*/
.todo-footer {
  height: 40px;
  line-height: 40px;
  padding-left: 6px;
  margin-top: 5px;
}
.todo-footer label {
  display: inline-block;
  margin-right: 20px;
  cursor: pointer;
}
.todo-footer label input {
  position: relative;
  top: -1px;
  vertical-align: middle;
  margin-right: 5px;
}
.todo-footer button {
  float: right;
  margin-top: 5px;
}

index.jsx

import React, { Component } from 'react'
import "./index.css"
export default class Footer extends Component {
  render() {
    return (
      <div className="todo-footer">
      <label>
        <input type="checkbox"/>
      </label>
      <span>
        <span>已完成0</span> / 全部2
      </span>
      <button className="btn btn-danger">清除已完成任务</button>
    </div>
    )
  }
}
  • 编写APP组件

index.css

/*base*/
body {
  background: #fff;
}
.btn {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}
.btn-danger {
  color: #fff;
  background-color: #da4f49;
  border: 1px solid #bd362f;
}
.btn-danger:hover {
  color: #fff;
  background-color: #bd362f;
}
.btn:focus {
  outline: none;
}
.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

App.jsx

import React, { Component } from 'react'
import Header from "./components/Header"
import List from "./components/List"
import Footer from "./components/Footer"
import "./index.css"
export default class App extends Component {
  render() {
    return (
      <div className="todo-container">
      <div className="todo-wrap">
        <Header/>
        <List/>
        <Footer/>
      </div>
    </div>
    )
  }
}
  • 最后运行看看效果image.png

我们可以看到页面以及成功出现了，我们需要效果，说明我们静态拆分成功。

总结

  • 根据整体页面，思考如何拆分界面，如何抽取组件，可以画图理解。
  • 拆分组件时，先将静态的效果一个一个拆分为组件，组合起来不报错，在进行下一步。
文章标签：
前端开发
容器
天界程序员
目录
相关文章
阿珊和她的猫
|
存储 JSON JavaScript
从创建到维护：掌握package.json的最佳实践（一）
从创建到维护：掌握package.json的最佳实践
阿珊和她的猫
980 0
凉凉心.
|
2月前
|
前端开发 算法 Java
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（六）：全方面分析css的Flex布局，从纵、横两个坐标开始进行居中、两端等元素分布模式；刨析元素间隔、排序模式等
Flex 布局 布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 一、Flex 布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
凉凉心.
293 1
凉凉心.
|
2月前
|
前端开发 算法 Java
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（五）：背景属性；float浮动和position定位；详细分析相对、绝对、固定三种定位方式；使用浮动并清除浮动副作用
position定位（核心） 我们讲盒模型的时候，提到了3个属性可以用来控制页面排版。 三大属性：position属性，display属性，float属性。 position 属性控制页面上元素间的位置关系。 display 属性控制页面元素是否显示或者是堆叠还是并排显示。 float 属性提供控制方法。 通过float这种控制方法，可以实现多栏布局，导航菜单等等。 position属性是干嘛用的？怎么用？有哪些属性值？ position属性控制页面上元素间的位置关系，也就是排版。 怎么用？要知道怎么用
凉凉心.
423 0
YiShier
|
Python
Python 头哥实验题目（一、二、三）
Python 头哥实验题目（一、二、三）
YiShier
2172 0
划雨悦潭之赋
|
11月前
|
人工智能 前端开发 架构师
2025年前端局势分析，我该不该转行？
2024年，前端领域经历了快速变化，AIGC的兴起和市场HC减少使得前端工程师面临挑战。尽管AI工具如通义灵码和Cursor能高效生成代码，但AI无法完全取代前端工程师，因其缺乏逻辑、沟通和创新能力。前端工作不仅限于编码，还包括需求分析、代码评审等。未来，前端不会“死亡”，而是持续演变。面对大环境的压力，提升综合能力、拥抱变化、持续学习和保持身心健康是关键。转型方向包括升管理、做架构师或转讲师等。稳住2025年，需适应变化、不断学习并探索更多可能性。
划雨悦潭之赋
2052 16
高端源码库
|
数据挖掘 BI
数字化产科管理平台解决方案
数字化产科管理平台旨在解决产科应用痛点，通过建设孕产保健信息系统，实现保健、临床及上级管理系统间的互联互通，打造一体化服务模式。平台涵盖门诊、住院、统计三大模块，实现从建档到产后管理的全生命周期管理，提升高危管理效率，减少人工文书工作，优化资源配置，并提供精准的统计分析功能，助力科研与业务发展。
高端源码库
321 0
数字化产科管理平台解决方案
Echo_Wish
|
存储 运维 网络协议
运维的基本概念：服务器和网络基础知识
运维的基本概念：服务器和网络基础知识
Echo_Wish
1170 0
运维的基本概念：服务器和网络基础知识
小周sir
|
缓存 前端开发 JavaScript
探索现代前端框架与工具链
探索现代前端框架与工具链
小周sir
230 0
veyqsldnmor5c
|
存储 搜索推荐 算法
Java中的数组排序技术详解
Java中的数组排序技术详解
veyqsldnmor5c
261 0
Echo_Wish
|
机器学习/深度学习 Python
Scikit-Learn 高级教程——自动化机器学习
Scikit-Learn 高级教程——自动化机器学习【1月更文挑战第20篇】
Echo_Wish
291 2