Props de ReactJS

La principal diferencia entre el estado y las propiedadespropses inmutable. Por eso, el componente contenedor debe definir un estado que se pueda actualizar y modificar, mientras que los componentes secundarios deben usar propiedades para recibir datos desde el estado.

Uso de propiedades

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="Encabezado desde propiedades..." contentProp="Contenido
　　　desde propiedades..."/>，document.getElementById('app'));
export　default　App;

Esto produce el siguiente resultado.

Propiedades predeterminadas

También puede configurar directamente valores de propiedades predeterminadas en el constructor del componente, en lugar de agregarlos al 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: "Encabezado desde propiedades...",
　　　contentProp: "Contenido desde propiedades..."
}
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 propiedades

El siguiente ejemplo muestra cómoestadoEn la aplicación se realiza la combinación y el soporte. En el componente padre configuramos el estado y luego usamospropspara pasarlo al árbol de componentes. EnrenderDentro de la función, estamos configurandoheaderPropycontentPropEn el componente secundario se utiliza.

App.jsx

import　React　from　'react';
class　App　extends　React.Component　{
　　　constructor(props)　{
　　　　　　super(props);
　　　　　　this.state　=　{
　　　　　　　　　header:　"Encabezado desde propiedades...",
　　　　　　　　　content:　"Contenido desde propiedades..."
　　　　　　}
　　　}
　　　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'));

Los resultados serán los mismos que en los dos ejemplos anteriores, la única diferencia es nuestra fuente de datos, que originalmente proviene deestadoCuando queremos actualizarlo, solo necesitamos actualizar el estado, todos los componentes hijos se actualizarán.