От автора: основное различие между состоянием и свойством заключается в том, что свойства компонента неизменны. Вот почему компонент контейнера должен определять состояние, которое может быть обновлено и изменено, тогда как дочерние компоненты должны передавать данные из состояния только с помощью свойства.
Использование свойства
Когда нам нужны в компоненте неизменные данные, мы можем просто добавить свойство в функцию reactDOM.render() в файле main.js и использовать его внутри компонента.
App.jsx
|
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 |
import React from 'react'; class App extends React.Component { constructor() { super(); this.state = { data: [ { "id":1, "name":"Foo", "age":"20" }, { "id":2, "name":"Bar", "age":"30" }, { "id":3, "name":"Baz", "age":"40" } ] } } render() { return ( <div> <Header/> <table> <tbody> {this.state.data.map((person, i) => <TableRow key = {i} data = {person} />)} </tbody> </table> </div> ); } } class Header extends React.Component { render() { return ( <div> <h1>Header</h1> </div> ); } } class TableRow extends React.Component { render() { return ( <tr> <td>{this.props.data.id}</td> <td>{this.props.data.name}</td> <td>{this.props.data.age}</td> </tr> ); } } export default App; |
main.js
|
1 2 3 4 5 6 7 8 |
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.jsx'; ReactDOM.render(<App headerProp = "Header from props..." contentProp = "Content from props..."/>, document.getElementById('app')); export default App; |
Это приведет к следующему результату.
Свойства по умолчанию
Вы также можете установить значения свойств по умолчанию непосредственно в конструкторе компонента, а не добавлять их в элемент reactDom.render().
App.jsx
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import React from 'react'; class App extends React.Component { render() { return ( <div> <h1>{this.props.headerProp}</h1> <h2>{this.props.contentProp}</h2> </div> ); } } App.defaultProps = { headerProp: "Header from props...", contentProp:"Content from props..." } export default App; |
main.js
|
1 2 3 4 5 |
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.jsx'; ReactDOM.render(<App/>, document.getElementById('app')); |
В результате мы получим то же, что и раньше.
Свойство и состояние
В следующем примере показано, как объединить состояние и свойство в приложении. Мы устанавливаем состояние в родительском компоненте и передаем его по дереву компонентов с помощью свойства. Внутри функции рендеринга мы устанавливаем headerProp и contentProp, используемые в дочерних компонентах.
App.jsx
|
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 |
import React from 'react'; class App extends React.Component { constructor(props) { super(props); this.state = { header: "Header from props...", content: "Content from props..." } } render() { return ( <div> <Header headerProp = {this.state.header}/> <Content contentProp = {this.state.content}/> </div> ); } } class Header extends React.Component { render() { return ( <div> <h1>{this.props.headerProp}</h1> </div> ); } } class Content extends React.Component { render() { return ( <div> <h2>{this.props.contentProp}</h2> </div> ); } } export default App; |
main.js
|
1 2 3 4 5 |
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.jsx'; ReactDOM.render(<App/>, document.getElementById('app')); |
Результат снова будет таким же, как и в предыдущих двух примерах, единственное, что отличается — это источник наших данных, который изначально исходит от состояния. Когда мы хотим его обновить, нам просто нужно обновить состояние, и все дочерние компоненты будут обновлены. Подробнее об этом в главе «События».
Источник: //www.tutorialspoint.com/
Редакция: Команда webformyself.
