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函數(shù)中的HTML代碼放入到TodoListUI中的render函數(shù)中去
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中的一些數(shù)據(jù)方法的調(diào)用隐解，這些數(shù)據(jù)方法都必須從父組件傳過來才能執(zhí)行不然代碼會報錯
4.父組件傳值給子組件代碼如下：
    render() {
        return (
            <TodoListUI 
            inputValue={this.state.inputValue}
            handleChange = {this.handleChange}
            handleAddList = { this.handleAddList}
            List = {this.state.List}
            handleDelet={this.handleDelet}
            />
        )
    }

5.子組件接收父組件傳過來的值和方法用props來打點調(diào)用
 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就只管頁面業(yè)務邏輯叫做容器組件