拆分Todo的UI组件和容器组件

1.在src目录下新建一个TodoListUI.js文件

import React,{ Component } from 'react';
import { Input,Button,List,Icon } from 'antd';

class TodoListUI extends Component {
    render() {
        return (
            
        )
    }
}

export default TodoListUI;

2.把TodoList中render函数中的HTML代码放入到TodoListUI中的render函数中去
import React,{ Component } from 'react';
import { Input,Button,List,Icon } from 'antd';

class TodoListUI extends Component {
    render() {
        return (
            

            

            
           提交
            
             (
                {item}
                 {this.props.handleDelet(index)}}
                 />
                )}
             />
             
        
        )
    }
}

export default TodoListUI;

3.需要修改TodoListUI中的一些数据方法的调用，这些数据方法都必须从父组件传过来才能执行不然代码会报错
4.父组件传值给子组件代码如下：
    render() {
        return (
            
        )
    }

5.子组件接收父组件传过来的值和方法用props来打点调用
 render() {
        return (
            

            

            
           提交
            
             (
                {item}
                 {this.props.handleDelet(index)}}
                 />
                )}
             />
             
        
        )
    }

6.TodoListUI组件就完成了，这个组件只管页面的显示没有任何的逻辑就叫做UI组件
7.TodoList就只管页面业务逻辑叫做容器组件