Props
Props похожи на свойства, их можно менять снаружи.
Объявляем props разными подходами
1
|
1 2 3 4 5 6 7 |
function Hello(props) { return <div> <p>Имя: {props.name}</p> <p>Возраст: {props.age}</p> </div>; } Hello.defaultProps = {name: "Tom", age: 22}; |
2
|
1 2 3 4 5 6 7 8 9 |
class Hello extends React.Component { render() { return <div> <p>Имя: {this.props.name}</p> <p>Возраст: {this.props.age}</p> </div>; } } Hello.defaultProps = {name: "Tom", age: 22}; |
3
|
1 2 3 4 5 6 7 8 |
const Hello = (props) => { const {name, age} = props; return(<div> <p>Имя: {name}</p> <p>Возраст: {age}</p> </div>); } |
Пример применения
|
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 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hello React</title> </head> <body> <div id="app"></div> <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script> <script type="text/babel"> class Hello extends React.Component { render() { return <div> <p>Имя: {this.props.name}</p> <p>Возраст: {this.props.age}</p> </div>; } } ReactDOM.render( <Hello name="Stas" age="35" />, document.getElementById("app") ) </script> </body> </html> |
State
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 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hello React</title> </head> <body> <div id="app"></div> <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script> <script type="text/babel"> class Hello extends React.Component { constructor(props) { super(props); this.state = {welcome: "Добро пожаловать на сайт!"}; } render() { return <h1>{this.state.welcome}</h1>; } } ReactDOM.render( <Hello />, document.getElementById("app") ) </script> </body> </html> |
Строка
|
1 |
super(props); |
означает передачу объекта props в конструктор базового класса
Обновление состояния производится методом
|
1 |
this.setState({welcome: "Привет React"}); |
Пример
|
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 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hello React</title> <style> button{ width: 100px; height:30px; border-radius: 4px; margin:50px; } .on{ color:#666; background-color: #ccc; } .off{ color:#888; background-color: white; } </style> </head> <body> <div id="app"></div> <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script> <script type="text/babel"> class ClickButton extends React.Component { constructor(props) { super(props); this.state = {class: "off", label: "Нажми"}; this.press = this.press.bind(this); } press(){ let className = (this.state.class==="off")?"on":"off"; this.setState({class: className}); } render() { return <button onClick={this.press} className={this.state.class}>{this.state.label}</button>; } } ReactDOM.render( <ClickButton />, document.getElementById("app") ) </script> </body> </html> |
