拆分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 (
            <div style={{marginTop:100,marginLeft:500}}>
            <div>
            <Input placeholder="Todo info" value={this.props.inputValue} style={{width : 400,marginRight : 10}}
            onChange={this.props.handleChange}
           />
           <Button type="primary" onClick={this.props.handleAddList} >提交</Button>
            </div>
            <List
                style={{width : 400}}
                size="small"
                bordered
                dataSource={this.props.List}
                renderItem={(item,index) => (<List.Item  style={{position : "relative"}}>
                {item}
                <Icon
                 type="close-square" 
                 theme="twoTone" 
                 spin
                 style={{position : "absolute" , right : 15,top :12}} 
                 onClick={() => {this.props.handleDelet(index)}}
                 />
                </List.Item>)}
             />
             
        </div>
        )
    }
}

export default TodoListUI;

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

5.子组件接收父组件传过来的值和方法用props来打点调用
 render() {
        return (
            <div style={{marginTop:100,marginLeft:500}}>
            <div>
            <Input placeholder="Todo info" value={this.props.inputValue} style={{width : 400,marginRight : 10}}
            onChange={this.props.handleChange}
           />
           <Button type="primary" onClick={this.props.handleAddList} >提交</Button>
            </div>
            <List
                style={{width : 400}}
                size="small"
                bordered
                dataSource={this.props.List}
                renderItem={(item,index) => (<List.Item  style={{position : "relative"}}>
                {item}
                <Icon
                 type="close-square" 
                 theme="twoTone" 
                 spin
                 style={{position : "absolute" , right : 15,top :12}} 
                 onClick={() => {this.props.handleDelet(index)}}
                 />
                </List.Item>)}
             />
             
        </div>
        )
    }

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