每天学点React - 通用功能界面的组件编码流程

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第20 天，点击查看活动详情

通用功能界面的组件编码流程

1、拆分组件

拆分界面，抽取组件

2、实现静态组件

使用组件实现静态页面效果

3、实现动态组件

3.1 动态显示初始化数据

• 数据类型
• 数据名称
• 保存在哪个组件？

3.2 交互（从绑定事件监听开始）

组件的组合使用-TodoList

功能描述：

1. 显示所有todo列表
2. 输入文本，点击按钮显示到列表的首位，并清除输入的文本
3. 鼠标移动到列表，在悬停行显示删除按钮
4. 统计已完成与全部任务数量
5. 清除已完成任务

组件简单规划

1. Header：文本框区域
2. Body：任务列表区域
3. Item：任务区域
4. Footer：统计区域

拆分与静态组件代码实现

App

引入Header, Body, Footer等组件

import {Component} from 'react'

import Header from './components/Header'
import Body from './components/Body'
import Footer from './components/Footer'

class App extends Component {
    render() {
        return (
            <div id="root">
                <div className="todo-container">
                    <div className="todo-wrap">
                        <Header/>
                        <Body/>
                        <Footer/>
                    </div>
                </div>
            </div>
        )
    }
}

export default App

Header

实现输入框组件

import React, { Component } from 'react'

export default class Header extends Component {
  render() {
    return (
      <div className="todo-header">
        <input type="text" placeholder="请输入任务名称，按回车键确认" />
      </div>
    )
  }
}

.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);
}

Body

实现任务列表组件

import React, { Component } from 'react'
import Item from '../Item'

export default class Body extends Component {
  render() {
    return (
      <ul className="todo-main">
        <Item/>
      </ul>
    )
  }
}

.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

import React, { Component } from 'react'

export default class Item extends Component {
  render() {
    return (
      <li>
        <label>
          <input type="checkbox" />
          <span>yyyy</span>
        </label>
        <button class="btn btn-danger" style="display:none">删除</button>
      </li>
    )
  }
}

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

实现底部统计组件

import React, { Component } from 'react'

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>
    )
  }
}

.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;
}

动态组件

未完，待续。。。