Props ReactJS

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

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

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>
　　　　　　;
　　　}
}

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'));

вывод будет таким же, как и раньше.

состояние и пропсы

Ниже приведен пример того, какstateВ приложении они объединяются и поддерживаются. Мы устанавливаем состояние в родительском компоненте, а затем используемpropsи передаем его в компонентную деревья.renderВнутри функции мы устанавливаем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'));

Результат будет таким же, как и в первых двух примерах, единственное отличие в том, что наш источник данных изначально поступает изstateКогда мы хотим обновить его, нам нужно только обновить состояние, и все подкомпоненты будут обновлены.