React Props

En React, los Props (propiedades) son el mecanismo para pasar datos del componente padre al componente hijo. Los Props son de solo lectura; los componentes hijos no pueden modificarlos directamente, sino que el componente padre debe administrarlos y actualizarlos.

La principal diferencia entre state y props es quepropslos props son inmutables, mientras que state puede cambiar según la interacción con el usuario. Es por eso que algunos componentes contenedores necesitan definir state para actualizar y modificar datos. Y los componentes hijos solo pueden transferir datos a través de props.

Usando Props

Sintaxis para pasar Props:

<ComponentName propName={propValue} />

El siguiente ejemplo demuestra cómo usar props en un componente:

Ejemplo de React

function HelloMessage(props) { return <h1>Hello {props.name}!</h1>; } const element = <HelloMessage name="Ejemplo"/>; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( element );

Pruébalo »

En el ejemplo, el atributo name se obtiene mediante props.name.

Props predeterminados

Puedes establecer valores predeterminados para props mediante la propiedad defaultProps de la clase del componente. Ejemplo:

Ejemplo de React

class HelloMessage extends React.Component { render() { return ( <h1>Hello, {this.props.name}</h1> ); } } HelloMessage.defaultProps = { name: 'Ejemplo' }; const element = <HelloMessage/>; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( element );

Pruébalo »

Múltiples Props

Puedes pasar múltiples atributos al componente hijo.

Ejemplo

const UserCard = (props) => {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>Age: {props.age}</p>
      <p>Location: {props.location}</p>
    </div>
  );
};

const App = () => {
  return (
    <UserCard name="Alice" age={25} location="New York" />
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

Validación de propTypes

propTypes es una herramienta proporcionada por React para realizar la verificación de tipos de los props de un componente.

Puedes usar la librería prop-types para verificar los tipos de los props del componente.

En React, propTypes se define como una propiedad estática del componente. Primero, necesitas instalar el paquete prop-types:

npm install prop-types

Luego, importa prop-types en el archivo de tu componente y define la propiedad propTypes. A continuación se muestra un ejemplo:

Ejemplo

import PropTypes from 'prop-types';

const Greeting = (props) => {
  return <h1>Hello, {props.name}!</h1>;
};

Greeting.propTypes = {
  name: PropTypes.string.isRequired
};

const App = () => {
  return (
    <div>
      <Greeting name="Alice" />
      {/* <Greeting /> // Esta línea provocará una advertencia en la consola, porque name es obligatorio */}
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

Pasar funciones de devolución de llamada como Props

Puedes pasar funciones como props al componente hijo, y este puede invocar esas funciones para comunicarse con el componente padre.

Ejemplo

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { message: '' };
  }

  handleMessage = (msg) => {
    this.setState({ message: msg });
  };

  render() {
    return (
      <div>
        <ChildComponent onMessage={this.handleMessage} />
        <p>Message from Child: {this.state.message}</p>
      </div>
    );
  }
}

const ChildComponent = (props) => {
  const sendMessage = () => {
    props.onMessage('Hello from Child!');
  };

  return (
    <div>
      <button onClick={sendMessage}>Send Message</button>
    </div>
  );
};

ReactDOM.render(<ParentComponent />, document.getElementById('root'));

Desestructurando Props

En los componentes de función, puedes simplificar el código desestructurando props.

Ejemplo

const Greeting = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

const App = () => {
  return <Greeting name="Alice" />;
};

ReactDOM.render(<App />, document.getElementById('root'));

Resumen

  • Pasar y usar Props: el componente padre pasa datos al componente hijo, el componente hijo recibe mediantepropslos props.
  • Props predeterminados:usadefaultPropspara establecer los valores predeterminados de los atributos del componente.
  • Validación de PropTypes:usaprop-typesla librería para verificar los tipos de props.
  • Pasar funciones de devolución de llamada: el componente padre puede pasar funciones como props al componente hijo, para lograr la comunicación entre componentes.
  • Desestructurar Props: desestructura props en componentes de función para simplificar el código.

State y Props

El siguiente ejemplo demuestra cómo combinar state y props en una aplicación. Podemos establecer state en el componente padre y pasarlo al componente hijo mediante props. En la función render, configuramos name y site para obtener los datos pasados por el componente padre.

Ejemplo de React

class WebSite extends React.Component { constructor() { super(); this.state = { name: "Ejemplo", site: "https://www.example.com" } } render() { return ( <div> <Name name={this.state.name} /> <Link site={this.state.site} /> </div> ); } } class Name extends React.Component { render() { return ( <h1>{this.props.name}</h1> ); } } class Link extends React.Component { render() { return ( <a href={this.props.site}> {this.props.site} </a> ); } } const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <WebSite /> );

Pruébalo »

Validación de Props

React.PropTypes se ha movido a la libreríaprop-typesprop-types.

<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/prop-types/15.8.1/prop-types.min.js" type="application/javascript"></script>

La validación de Props usapropTypesla librería prop-types, que puede garantizar que los componentes de nuestra aplicación se utilicen correctamente. React.PropTypes proporciona muchos validadores (validator) para verificar si los datos entrantes son válidos. Cuando se pasan datos no válidos a props, la consola de JavaScript mostrará una advertencia.

El siguiente ejemplo crea un componente Mytitle. El atributo title es obligatorio y debe ser una cadena; los tipos que no son cadenas se convertirán automáticamente en cadenas:

Ejemplo de React 16.4

var title = "Ejemplo"; // var title = 123; class MyTitle extends React.Component { render() { return ( <h1>Hello, {this.props.title}</h1> ); } } MyTitle.propTypes = { title: PropTypes.string }; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <MyTitle title={title} /> );

Pruébalo »

Ejemplo de React 15.4

var title = "Ejemplo"; // var title = 123; var MyTitle = React.createClass({ propTypes: { title: React.PropTypes.string.isRequired, }, render: function() { return <h1> {this.props.title} </h1>; } }); const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <MyTitle title={title} /> );

Pruébalo »

Por supuesto, podemos presentarte másPropTypesvalidadores y cómo usarlos. A continuación se muestran algunosPropTypesDescripción de los validadores:

Tipos de datos básicos

  • PropTypes.string: cadena
  • PropTypes.number: número
  • PropTypes.boolean: booleano
  • PropTypes.object: objeto
  • PropTypes.array: array
  • PropTypes.func: función
  • PropTypes.symbol：Symbol

Tipos especiales

  • PropTypes.node: cualquier contenido que se pueda renderizar: números, cadenas, elementos o arrays (incluidos estos tipos)
  • PropTypes.element: elemento de React
  • PropTypes.instanceOf(Class): instancia de una clase

Tipos combinados

  • PropTypes.oneOf(['option1', 'option2']): tipo de enumeración; el valor debe ser una de las opciones proporcionadas
  • PropTypes.oneOfType([PropTypes.string, PropTypes.number]): uno de varios tipos
  • PropTypes.arrayOf(PropTypes.number): array compuesto por un tipo determinado
  • PropTypes.objectOf(PropTypes.number): objeto compuesto por un tipo determinado
  • PropTypes.shape({ key: PropTypes.string, value: PropTypes.number }): objeto con una forma específica

Otros

  • PropTypes.any: cualquier tipo
  • PropTypes.exact({ key: PropTypes.string }): objeto con claves específicas y sin claves adicionales

A continuación se muestran algunos ejemplos de código que demuestran cómo usar diferentesPropTypesvalidadores:

Ejemplo

import React from 'react';
import ReactDOM from 'react-dom/client';
import PropTypes from 'prop-types';

class MyComponent extends React.Component {
  static propTypes = {
    title: PropTypes.string.isRequired, // Debe ser una cadena y es obligatorio
    age: PropTypes.number,              // Número opcional
    isAdmin: PropTypes.bool,            // Booleano opcional
    user: PropTypes.shape({             // Debe ser un objeto con una forma específica
      name: PropTypes.string,
      email: PropTypes.string
    }),
    items: PropTypes.arrayOf(PropTypes.string), // Debe ser un array de cadenas
    callback: PropTypes.func,           // Función opcional
    children: PropTypes.node,           // Contenido renderizable opcional
    options: PropTypes.oneOf(['option1', 'option2']), // Debe ser uno de los valores específicos
  };

  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
        {this.props.age && <p>Age: {this.props.age}</p>}
        {this.props.isAdmin && <p>Admin</p>}
        {this.props.user && (
          <div>
            <p>Name: {this.props.user.name}</p>
            <p>Email: {this.props.user.email}</p>
          </div>
        )}
        {this.props.items && (
          <ul>
            {this.props.items.map((item, index) => (
              <li key={index}>{item}</li>
            ))}
          </ul>
        )}
        {this.props.callback && (
          <button onClick={this.props.callback}>Click me</button>
        )}
        {this.props.children}
        {this.props.options && <p>Option: {this.props.options}</p>}
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <MyComponent
    title="Hello, World!"
    age={30}
    isAdmin={true}
    user={{ name: "John Doe", email: "[email protected]" }}
    items={['Item 1', 'Item 2', 'Item 3']}
    callback={() => alert('Button clicked!')}
    options="option1"
  >
    <p>This is a child element</p>
  </MyComponent>
);
Otras extensiones