UI组件和容器组件的拆分

1.首先，以前面的TodoList为例 以下是原来的TodoList中的render函数中的内容，我们可以将组件中关于UI渲染页面的封装到一个文件中

render() { return ( <div> <div style={{marginTop:'10px',marginLeft:'10px'}}> <input value={this.state.inputValue} placeholder='输入框' style={{ width: '300px', marginRight: '5px' }} onChange={this.handleInputChange}/> <Button type="primary" onClick={this.handleBtnClick}>提交</Button> </div> <div> <List style={{marginTop:'10px', width:'300px'}} bordered dataSource={this.state.list} renderItem={(item ,index)=> (<List.Item onClick={this.handleItemDelete.bind(this,index)}>{item}</List.Item>)} /> </div> </div> ) }

2.在src目录下新建一个文件名为TodoListUI.js。将刚刚的render中的内容复制到TodoListUI里面。

3 .这里需要进一步进行完善,逐条进行;

首先引入在TodoListUI中引入antd，因为我们用到了input ，button，list的样式 import {Input,Button,List } from 'antd'; input中的value值和list值需要从父组件TodoList中获取，在父组件中 在子组件中接收 处理handleInputChange，handleBtnClick，handleItemDelete 在父组件中： 子组件中使用this.props接收： TodoList完整代码： import React, { Component } from 'react'; import 'antd/dist/antd.css'; import store from './store/index'; import {getInputChangeAction,getAddItemAction,getDeleteItemAction} from './store/actionCreators' import {CHANGE_INPUT_VALUE,ADD_TODO_ITEM,DELETE_TODO_ITEM} from './store/actionTypes' import { from } from 'rxjs'; import TodoListUI from './TodoListUI'; class TodoList extends Component{ constructor(props) { super(props); //将获取到的store数据绑定给自己的this.state this.state = store.getState(); this.handleInputChange = this.handleInputChange.bind(this); this.handleStoreChange = this.handleStoreChange.bind(this); this.handleBtnClick = this.handleBtnClick.bind(this); this.handleItemDelete = this.handleItemDelete.bind(this); store.subscribe(this.handleStoreChange); } render() { return (<TodoListUI //向ui组件传递inputValue值和list inputValue={this.state.inputValue} list={this.state.list} //将handleInputChange，handleBtnClick，handleItemDelete以属性的形式传递给ui组件 handleInputChange={this.handleInputChange} handleBtnClick={this.handleBtnClick} handleItemDelete={this.handleItemDelete} />) } // handleInputChange(e) { // const action = { // //type：指需要改变的东西 // type:CHANGE_INPUT_VALUE, // value:e.target.value // } //通过dispatch(action)把数据传递给store // store.dispatch(action); handleInputChange(e) { const action = getInputChangeAction(e.target.value); store.dispatch(action); } handleStoreChange() { //当感知到store数据发生变化的时候，调用getStore方法重新取数据并替换原来的数据 this.setState(store.getState()) } // handleBtnClick() { // const action = { // type: ADD_TODO_ITEM, // }; // store.dispatch(action); // } handleBtnClick() { const action = getAddItemAction(); store.dispatch(action); } // handleItemDelete(index) { // const action = { // type: DELETE_TODO_ITEM, // //把下标的值index传递给reducer // index // } // store.dispatch(action); // } handleItemDelete(index) { const action = getDeleteItemAction(index); store.dispatch(action); } } export default TodoList;

TodoListUI完整代码：

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