React组件的组合使用-TodoList案例

一、功能界面的组件化编码流程（通用）

1. 拆分组件: 拆分界面,抽取组件
2. 实现静态组件: 使用组件实现静态页面效果
3. 实现动态组件
   3.1 动态显示初始化数据
   3.1.1 数据类型
   3.1.2 数据名称
   3.1.2 保存在哪个组件?
   3.2 交互(从绑定事件监听开始)

二、组件化

1. 显示所有todo列表
2. 输入文本, 点击按钮显示到列表的首位, 并清除输入的文本
   3.效果：
   

三、静态组件

2.1、创建组件

import React, {
    Component } from 'react'

export default class xxxx extends Component {
   
  render() {
   
    return (
      <div>x x x x</div>
    )
  }
}

2.3、引入静态文件

App.jsx

//导入核心库
import React, {
    Component } from "react";
import './App.css'

//创建外壳组件并暴露
export default class App extends Component {
   
  render() {
   
    // 把组件hello、welcome导入
    return (
      <div className="todo-wrap">
        <div className="todo-header">
          <input type="text" placeholder="请输入你的任务名称，按回车键确认" />
        </div>
        <ul className="todo-main">
          <li>
            <label>
              <input type="checkbox" />
              <span>xxxxx</span>
            </label>
            <button className="btn btn-danger" style={
   {
    display: "none" }}>
              删除
            </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>
    );
  }
}

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

2.4、把App.jsx、App.css拆分至各个组件

App.jsx

//导入核心库
import React, {
    Component } from "react"