ReactJS - Descripción general de los accesorios

La principal diferencia entre el estado y los accesorios es que propsson inmutables. Esta es la razón por la que el componente contenedor debe definir el estado que se puede actualizar y cambiar, mientras que los componentes secundarios solo deben pasar datos del estado mediante accesorios.

Usando Props

Cuando necesitamos datos inmutables en nuestro componente, podemos simplemente agregar accesorios a reactDOM.render() funcionar en main.js y usarlo dentro de nuestro 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;

Esto producirá el siguiente resultado.

Accesorios predeterminados

También puede establecer valores de propiedad predeterminados directamente en el constructor del componente en lugar de agregarlo al 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'));

La salida es la misma que antes.

Estado y accesorios

El siguiente ejemplo muestra cómo combinar statey accesorios en tu aplicación. Estamos configurando el estado en nuestro componente principal y pasándolo por el árbol de componentes usandoprops. Dentro derender función, estamos configurando headerProp y contentProp utilizado en componentes secundarios.

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

El resultado volverá a ser el mismo que en los dos ejemplos anteriores, lo único que es diferente es la fuente de nuestros datos, que ahora proviene originalmente del state. Cuando queremos actualizarlo, solo necesitamos actualizar el estado y todos los componentes secundarios se actualizarán. Más sobre esto en el capítulo Eventos.