ReactJS — Обзор свойств компонента

От автора: основное различие между состоянием и свойством заключается в том, что свойства компонента неизменны. Вот почему компонент контейнера должен определять состояние, которое может быть обновлено и изменено, тогда как дочерние компоненты должны передавать данные из состояния только с помощью свойства.

Использование свойства

Когда нам нужны в компоненте неизменные данные, мы можем просто добавить свойство в функцию reactDOM.render() в файле main.js и использовать его внутри компонента.

App.jsx

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

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

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

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx'; ReactDOM.render(<App/>, document.getElementById('app'));

В результате мы получим то же, что и раньше.

Свойство и состояние

В следующем примере показано, как объединить состояние и свойство в приложении. Мы устанавливаем состояние в родительском компоненте и передаем его по дереву компонентов с помощью свойства. Внутри функции рендеринга мы устанавливаем headerProp и contentProp, используемые в дочерних компонентах.

App.jsx

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

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx'; ReactDOM.render(<App/>, document.getElementById('app'));

Результат снова будет таким же, как и в предыдущих двух примерах, единственное, что отличается — это источник наших данных, который изначально исходит от состояния. Когда мы хотим его обновить, нам просто нужно обновить состояние, и все дочерние компоненты будут обновлены. Подробнее об этом в главе «События».

Источник: https://www.tutorialspoint.com/

Редакция: Команда webformyself.