ReactJS - Visão geral dos adereços

A principal diferença entre o estado e os adereços é que propssão imutáveis. É por isso que o componente do contêiner deve definir o estado que pode ser atualizado e alterado, enquanto os componentes filhos devem apenas passar dados do estado usando props.

Usando adereços

Quando precisamos de dados imutáveis ​​em nosso componente, podemos apenas adicionar adereços para reactDOM.render() função em main.js e usá-lo dentro do nosso componente.

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

Isso produzirá o seguinte resultado.

Acessórios padrão

Você também pode definir valores de propriedade padrão diretamente no construtor do componente, em vez de adicioná-lo ao reactDom.render() elemento.

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 de antes.

Estado e adereços

O exemplo a seguir mostra como combinar statee adereços em seu aplicativo. Estamos definindo o estado em nosso componente pai e passando-o para baixo na árvore de componentes usandoprops. Dentro derender função, estamos definindo headerProp e contentProp usado em componentes filhos.

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

O resultado será novamente o mesmo que nos dois exemplos anteriores, a única coisa que é diferente é a fonte de nossos dados, que agora vem originalmente do state. Quando quisermos atualizá-lo, precisamos apenas atualizar o estado, e todos os componentes filhos serão atualizados. Mais sobre isso no capítulo Eventos.