第十九章 案例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>
    )
  }
}

• 最后运行看看效果

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

---

总结

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