How to react introductory series of split components ui components and containers

How to split ui assembly ### and container assembly

- ui component - component fool - page rendering

- container components - Smart Components - Logic page

- We now take a look at the original components

 

  1  / * *
   2  * is a required component library person, by communicating dispatch action (title) to a librarian (Store)
   . 3  * / 
  . 4  
  . 5 Import React, the Component {,} from Fragment 'REACT' ;
   . 6 Import the Input {, the Button, List, Message} from "antd" ;
   . 7 Import from Store './store'; // introduced librarian Store 
  . 8  // introduced 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 ( the this .handleStroeChange) // librarian will keep each borrower, changes in library books 
22  }
 23  
24-  the render () {
 25  return (
 26 <Fragment>
 27 <div style = {{marginTop : '10px', marginLeft: '10px'}}>
 28 < the Input
 29 placeholder = 'TODO-List'
 30 style = {{width: '300px by', marginRight: '10px' }}
 31 is the onChange = { the this .handleInputChange}
 32 value = { the this .state.inputValue}
 33 is />
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  the this .setState (store.getState ()) // Whenever there is a change library, librarian (store) tell the borrower (component through this way ) 
100  }
 101  }
 102  
103 Export default the App;

 

- html next part (the contents of render functions) our primitive to split a single component assembly

- The original data acquisition methods are by props

- jsx Syntax render a function can not pass a parameter directly in the function, the function may be used arrow

 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

- the rest of the original components are logical code programmed container assembly

- the introduction of original components ui component

- and passed props he needs to ui component

1  / * *
 2  * is a required component library person, by communicating dispatch action (title) to a librarian (Store)
 . 3  * / 
. 4  
. 5 Import React, {from} the Component 'REACT' ;
 . 6 Import {Message from} "antd" ;
 . 7 Import from Store './store'; // introduced librarian Store 
. 8 Import from the AppUi './AppUi' ;
 . 9  // introduced Action 
10 Import {getInputChangeValue, getAddTodoListValue, from getDeletTodoListValue} '. / Store / actionCreators'
 . 11  // Import {CHANGE_INPUT_VALUE, CHANGE_LIST_VALUE, DELETE_LIST_VALUE} from './store/actionTypes' 
12 is 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 = the this .deletTodoList.bind ( the this );
 22 store.subscribe ( the this .handleStroeChange) // librarian will keep each borrower, changes in library books 
23  }
 24-  
25  the render () {
 26  return (
 27 < the AppUi
 28 for inputValue = { the this .state.inputValue}
 29 handleInputChange = { the this .handleInputChange}
 30 deletTodoList = { the this .deletTodoList}
 31 is addTodoList = { the this .addTodoList}
 32 List = { the 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  // delete 
68  deletTodoList (index) {
 69  / * 
70  const = {Action
 71 is  type: DELETE_LIST_VALUE,
 72  value: index
 73 is  }
 74  * / 
75  the console.log (index)
 76 const Action = getDeletTodoListValue (index)
 77  store.dispatch (Action)
 78  }
 79  handleStroeChange () {
 80  the this .setState (store.getState ()) // whenever there is a change library, librarian (store) tell the borrower (component through this way ) 
81  }
 82  }
 83  
84 export default App;