组件的设计原理

1 案例结构

代码

app.js

//组件形式 function 函数形式 class类
// 01 react事件

import React, { Component } from 'react';
// 导入react和react组件
// import ChildA from './components/ChildA'
// import ChildB from './components/ChilB'
// import Life from './components/Life'
import Todo from './pages/todo/index'
//定义一个App组件 继承Component
class App extends Component {
  //构造函数
  constructor(props) {
    super(props);
    //调用父组件
    this.state = { num: 1 }
    //定义一个状态 （data数据）
  }

 
  //渲染节点
  render() {
    return (
      

       
          


      
    );
  }
}


export default App;

index.js

import React, { Component } from 'react'
import List from './List';
import Input from './Input'
class Todo extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            list:[
                {done:false,title:"学习react",status:0},
                {done:true,title:"学习vue",status:0},
                {done:false,title:"小程序",status:0}
            ]
        }
        
    }
    // 添加item
    addItem = e=>{
        var list = this.state.list; //获取到原list
        list.unshift({title:e.title,done:false,status:0}) //把新数据添加到list
        this.setState({list}) //更新list

    }
    // 删除item
    delItem = item=>{
        var list = this.state.list;
        var ind = list.indexOf(item);
        list.splice(ind,1);
        this.setState({list})
    }
    // item被改变
    itemChange = (item,data)=>{
        var list = this.state.list; //获取原来的list
        var ind = list.indexOf(item); //获取是第几个
        list[ind]={...item,...data} //用data 去覆盖item的属性
        this.setState({list}) //更新list
    }
    render() { 
        let listUndo = this.state.list.filter(item=>!item.done); //未完成
        let listDone = this.state.list.filter(item=>item.done); //已经完成
        return ( 
        

            
TodoList
            
            {/* addItem方法通过props addItem传入给Input */}
            
未完成({listUndo.length})
            

            
已经完成({ listDone.length})
            
        
 );
    }
}
 
export default Todo;

List.js

import React from 'react'
import Item from './Item.js'
function List({list,delItem,itemChange}){
    return (
    

        {
            list.map(
                item=>{
                    return (
                                
                        
                )}
            )
            // 把list通过map映射为有Item组件的数组 并传入item数据给Item组件
        }
       
    
)
}
export default List;

Item.js

import React, { Component } from 'react'
class Item extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        let {item,delItem,itemChange} = this.props
        // 简写props.item
        return ( 
        

            
                itemChange(item,{done:e.target.checked})}/>
                {item.title}
                {delItem(item)}}>×
            
        
 );
    }
}
 
export default Item;

Input.js

import React  from 'react';
function Input({addItem}){
    let inp = null; //定义inp  通过ref函数获取到 input节点
    return (

        inp=elem}
        onKeyUp={e=>{
            if(e.keyCode!==13){return}
            addItem({title:inp.value,status:0})
            inp.value = "";
        }}
        />
        {
            // 当单击添加按钮是 执行props 的addItem方法
            addItem({title:inp.value,status:0});
            inp.value = "";
        }}>添加
    
)
}
export default Input;