1 拆分UI组件和容器组件
import React from 'react' const AppUI = (props) =>{ return ( <div className="App"> <label htmlFor="box"> 输入信息 <input id="box" value = {props.inputValue} onChange = {props.handleInputChange} /> <button onClick={props.submitData}>提交</button> </label> <ul> { props.list.map((item,index) => { return ( <li key={index} onClick={props.deleteList.bind(this,index) }>{item}</li> ) }) } </ul> </div> ); } export default AppUI;
对应的聪明组件:
render() { const {inputValue,list} = this.state return ( <AppUI inputValue = {inputValue} handleInputChange = {this.handleInputChange} submitData = {this.submitData} list = {list} deleteList = {this.deleteList} /> ); }