Props do ReactJS

A principal diferença entre estado e propspropsé imutável. Por isso, o componente contenedor deve definir um estado que pode ser atualizado e modificado, enquanto os componentes filhos devem usar props para passar dados do estado.

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

Isso resultará no seguinte.

Props padrão

Você também pode definir diretamente os valores padrão de propriedades no construtor do componente, em vez de adicioná-lo ao elemento 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'));

A saída é a mesma que antes.

estado e props

O seguinte exemplo mostra comoestadoNa aplicação, estamos realizando a fusão e suporte. No componente pai, configuramos o estado e, em seguida, usamospropsPassando para a árvore de componentes. EmrenderDentro da função, estamos configurandoheaderPropecontentPropNo componente filho.

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

Os resultados serão novamente os mesmos que nos dois exemplos anteriores, a única diferença é a nossa fonte de dados, que inicialmente veio deestadoQuando queremos atualizá-lo, basta atualizar o estado, todos os componentes filhos serão atualizados.