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

最后运行看看效果

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

总结

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

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

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

拆分组件并编写代码

总结

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

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

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

拆分组件并编写代码

总结

热门文章

最新文章

相关电子书

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