UI组件的优化

因为TodoListUI中只有render一个函数，我们可以进行如下优化，将其写成一个箭头函数的形式，并且传入参数props，并且将之前的this.props替换成props

import React, { Component } from 'react'; import { Input, Button, List } from 'antd'; const TodoListUI = (props) =>{ return ( <div style={{ marginTop: '10px', marginLeft: '10px' }}> <div> <input value={props.inputValue} placeholder='输入框' style={{ width: '300px', marginRight: '5px' }} onChange={props.handleInputChange} /> <Button type="primary" onClick={props.handleBtnClick}>提交</Button> </div> <List style={{marginTop:'10px', width:'300px'}} bordered dataSource={props.list} renderItem={(item ,index)=> (<List.Item onClick={(index)=>{props.handleItemDelete(index)}}>{item}</List.Item>)} /> </div> ) }