> 文章列表 > 第十九章 案例TodoList之组件拆分

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

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

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

在这里插入图片描述


以上是该案例的静态示例,其功能有:

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

静态页面拆分组件

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

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

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

在这里插入图片描述


从上图我们可以知道,我们将静态页面拆分成了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>)}
}
  • 查看效果

在这里插入图片描述

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

  • 类名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>)}
}
  • 最后运行看看效果

在这里插入图片描述

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


总结

  • 根据整体页面,思考如何拆分界面,如何抽取组件,可以画图理解。
  • 拆分组件时,先将静态的效果一个一个拆分为组件,组合起来不报错,在进行下一步。