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