react入門系列之如何拆分ui組件和容器組件

###如何拆分ui組件和容器組件

- ui組件-傻瓜組件-頁面渲染

- 容器組件-聰明組件-頁面邏輯

- 咱們現看看原來組件

 

  1 /**
  2 * 組件就是一個須要借書的人，經過 dispatch 傳達 action （書名）給圖書管理員（store）
  3 */
  4 
  5 import React, { Component, Fragment }from 'react';
  6 import { Input, Button, List, message } from "antd";
  7 import store from './store'; // 引入圖書管理員 store
  8 // 引入action
  9 import { getInputChangeValue, getAddTodoListValue, getDeletTodoListValue } from './store/actionCreators'
 10 // import { CHANGE_INPUT_VALUE, CHANGE_LIST_VALUE, DELETE_LIST_VALUE } from './store/actionTypes'
 11 import "antd/dist/antd.css";
 12 class App extends Component {
 13 constructor(props){
 14 super(props)
 15 this.state = store.getState()
 16 console.log(store.getState())
 17 this.handleInputChange = this.handleInputChange.bind(this);
 18 this.addTodoList = this.addTodoList.bind(this);
 19 this.handleStroeChange = this.handleStroeChange.bind(this);
 20 // this.deletTodoList = this.deletTodoList.bind(this);
 21 store.subscribe(this.handleStroeChange) // 圖書管理員會隨時通知各個借書人，圖書館書籍的變化
 22 }
 23 
 24 render() {
 25 return (
 26 <Fragment>
 27 <div style={{ marginTop: '10px', marginLeft: '10px'}}>
 28 <Input
 29 placeholder='todo-list'
 30 style={{width: '300px', marginRight: '10px'}}
 31 onChange = { this.handleInputChange }
 32 value = { this.state.inputValue }
 33 />
 34 <Button
 35 type="primary"
 36 onClick = { this.addTodoList }
 37 >提交</Button>
 38 </div>
 39 <List
 40 style={{width: '300px', marginLeft: '10px', marginTop: '5px'}}
 41 size="large"
 42 bordered
 43 dataSource={ this.state.list ? this.state.list : null }
 44 renderItem={ (item, index) => <List.Item style={{position:'relative'}}>
 45 {item}
 46 <Button
 47 type='danger'
 48 style={{position: 'absolute', right: '10px', top:'50%', marginTop:'-5%'}}
 49 onClick={ this.deletTodoList.bind(this, index) }
 50 >刪除</Button>
 51 </List.Item>}
 52 />
 53 </Fragment>
 54 );
 55 }
 56 handleInputChange(e) {
 57 /*
 58 const action = {
 59 type: CHANGE_INPUT_VALUE, // 借什麼書
 60 value: e.target.value
 61 }
 62 */
 63 const action = getInputChangeValue(e.target.value)
 64 store.dispatch(action); // 傳達給store
 65 console.log(e.target.value)
 66 }
 67 // 添加
 68 addTodoList() {
 69 /*
 70 if (this.state.inputValue) {
 71 const action = {
 72 type: CHANGE_LIST_VALUE,
 73 item: this.state.inputValue
 74 }
 75 store.dispatch(action)
 76 } else {
 77 message.warning('請輸入內容');
 78 }
 79 */
 80 if (this.state.inputValue) {
 81 const action = getAddTodoListValue(this.state.inputValue)
 82 store.dispatch(action)
 83 } else {
 84 message.warning('請輸入內容');
 85 }
 86 }
 87 // 刪除
 88 deletTodoList(index) {
 89 /*
 90 const action = {
 91 type: DELETE_LIST_VALUE,
 92 value: index
 93 }
 94 */
 95 const action = getDeletTodoListValue(index)
 96 store.dispatch(action)
 97 }
 98 handleStroeChange() {
 99 this.setState(store.getState()) // 每當圖書館有變化的時候，圖書管理員（store）經過這個方式告訴借書人（組件）
100 }
101 }
102 
103 export default App;

 

- 接下來咱們本原組件的html部分（render函數的內容）拆分到單獨一個組件

- 原來的數據方法都是經過props獲取

- render函數中的jsx語法不能直接在函數中傳遞參數，可是可使用箭頭函數

 1 import React, { Component, Fragment }from 'react';
 2 import { Input, Button, List } from "antd";
 3 
 4 class AppUi extends Component {
 5 render() {
 6 return (
 7 <Fragment>
 8 <div style={{ marginTop: '10px', marginLeft: '10px'}}>
 9 <Input
10 placeholder='todo-list'
11 style={{width: '300px', marginRight: '10px'}}
12 onChange = { this.props.handleInputChange }
13 value = { this.props.inputValue }
14 />
15 <Button
16 type="primary"
17 onClick = { this.props.addTodoList }
18 >提交</Button>
19 </div>
20 <List
21 style={{width: '300px', marginLeft: '10px', marginTop: '5px'}}
22 size="large"
23 bordered
24 dataSource={ this.props.list ? this.props.list : null }
25 renderItem={ (item, index) => (<List.Item style={{position:'relative'}}>
26 {item}
27 <Button
28 type='danger'
29 onClick= {() => {this.props.deletTodoList(index)}}
30 style={{position: 'absolute', right: '10px', top:'50%', marginTop:'-5%'}}
31 >刪除</Button>
32 </List.Item>)}
33 />
34 </Fragment>
35 )
36 }
37 }
38 
39 export default AppUi

- 原組件剩下的都是邏輯代碼，編程了容器組件

- 將ui組件引入原組件

- 而且給ui組件中傳遞他所須要的props

 1 /**
 2 * 組件就是一個須要借書的人，經過 dispatch 傳達 action （書名）給圖書管理員（store）
 3 */
 4 
 5 import React, { Component }from 'react';
 6 import { message } from "antd";
 7 import store from './store'; // 引入圖書管理員 store
 8 import AppUi from './AppUi';
 9 // 引入action
10 import { getInputChangeValue, getAddTodoListValue, getDeletTodoListValue } from './store/actionCreators'
11 // import { CHANGE_INPUT_VALUE, CHANGE_LIST_VALUE, DELETE_LIST_VALUE } from './store/actionTypes'
12 import "antd/dist/antd.css";
13 class App extends Component {
14 constructor(props){
15 super(props)
16 this.state = store.getState()
17 console.log(store.getState())
18 this.handleInputChange = this.handleInputChange.bind(this);
19 this.addTodoList = this.addTodoList.bind(this);
20 this.handleStroeChange = this.handleStroeChange.bind(this);
21 this.deletTodoList = this.deletTodoList.bind(this);
22 store.subscribe(this.handleStroeChange) // 圖書管理員會隨時通知各個借書人，圖書館書籍的變化
23 }
24 
25 render() {
26 return (
27 <AppUi
28 inputValue = {this.state.inputValue}
29 handleInputChange = {this.handleInputChange}
30 deletTodoList = {this.deletTodoList}
31 addTodoList = {this.addTodoList}
32 list = {this.state.list}
33 />
34 )
35 }
36 handleInputChange(e) {
37 /*
38 const action = {
39 type: CHANGE_INPUT_VALUE, // 借什麼書
40 value: e.target.value
41 }
42 */
43 const action = getInputChangeValue(e.target.value)
44 store.dispatch(action); // 傳達給store
45 console.log(e.target.value)
46 }
47 // 添加
48 addTodoList() {
49 /*
50 if (this.state.inputValue) {
51 const action = {
52 type: CHANGE_LIST_VALUE,
53 item: this.state.inputValue
54 }
55 store.dispatch(action)
56 } else {
57 message.warning('請輸入內容');
58 }
59 */
60 if (this.state.inputValue) {
61 const action = getAddTodoListValue(this.state.inputValue)
62 store.dispatch(action)
63 } else {
64 message.warning('請輸入內容');
65 }
66 }
67 // 刪除
68 deletTodoList(index) {
69 /*
70 const action = {
71 type: DELETE_LIST_VALUE,
72 value: index
73 }
74 */
75 console.log(index)
76 const action = getDeletTodoListValue(index)
77 store.dispatch(action)
78 }
79 handleStroeChange() {
80 this.setState(store.getState()) // 每當圖書館有變化的時候，圖書管理員（store）經過這個方式告訴借書人（組件）
81 }
82 }
83 
84 export default App;