-- Props: truyền dữ liệu từ component cha cho component con
-- State: dữ liệu nội bộ của 1 component
-- Global State: dữ liệu của nhiều component -> thường dùng Redux
1. State
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ReactJS</title> </head> <body> <div id="root"></div> <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <script type="text/babel"> class App extends React.Component { constructor(props) { super(props); this.state = { username: 'username...' } }; //input lấy value realtime từ state //input set ngược lại state bằng onchange(), trong đó biến event được gán vào tự động //set State bằng setState(); render() { return ( <div> <input type="text" value={this.state.username} onChange={(e) => { this.setState({ username: e.target.value }) }} /> <h4>{this.state.username}</h4> </div> ); } } ReactDOM.render( <App />, document.getElementById('root') ); </script> </body> </html> |
2. Props
-- Truyền dữ liệu từ component cha về component con bằng cách dùng props là ok
-- Ông component con truyền ngược lại cha bằng callback -> happy
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ReactJS</title> </head> <body> <div id="root"></div> <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <script type="text/babel"> class App extends React.Component { constructor(props) { super(props); this.state = { username: 'username...' } this.onUpdateState = this.onUpdateState.bind(this); }; onUpdateState(e, customText="") { this.setState({ username: e.target.value + customText }); } render() { return ( <div> <Content myDataProp={this.state.username} updateStateProp={this.onUpdateState}></Content> </div> ); } } //input nhận dữ liệu từ component cha thông qua props //input bắn dữ liệu ngược lại về component cha bằng callback //có thể dùng thêm parametter bằng cách dùng dùng arrow function class Content extends React.Component { constructor(props) { super(props); this.customText = " - plus" }; render() { return ( <div> <input type="text" onChange={(event) => { this.props.updateStateProp(event, this.customText) }} /> <input type="text" onChange={this.props.updateStateProp} /> <h3>{this.props.myDataProp}</h3> </div> ); } } ReactDOM.render( <App />, document.getElementById('root') ); </script> </body> </html> |
