Reaccionar: establecer accesorios predeterminados para componentes funcionales

En React, usamos accesorios para pasar valores de los componentes principales a sus hijos. Cuando creamos componentes funcionales, debemos considerar que algunos de los valores transmitidos como “accesorios” podrían no estar allí.

Aquí es donde necesitamos tener los accesorios predeterminados. El tutorial de hoy utiliza dos enfoques para demostrar cómo podemos establecer accesorios predeterminados para componentes funcionales en React.

Reaccionar - Establecer accesorios predeterminados para componentes funcionales

Hay dos enfoques para establecer accesorios predeterminados para componentes funcionales en React. Aquí, discutiremos y aprenderemos ambos métodos y destacaremos cuál es mejor usar.

Establecer parámetros predeterminados en la definición de función

El primer enfoque es utilizar la función de parámetros predeterminados en JavaScript. Veamos un ejemplo a continuación:

export default function App() {
  return (
    <div className="App">
      <Child firstName="George" lastName="Smith" />
    </div>
  );
}
function Child({ firstName = "Irakli", lastName = "Tchigladze" }) {
  return (
    <div className="App">
      <h1>{firstName + " " + lastName}</h1>
    </div>
  );
}

Si el componente principal transmite los props firstName y lastName, como en el ejemplo anterior, los valores especificados en el componente principal reemplazarán los valores predeterminados.

Si estos “accesorios” no se transmiten, el componente secundario utilizará los valores establecidos como parámetros predeterminados.

Ahora, intente eliminar los props establecidos en el componente <Child />. El componente secundario requiere estos valores para representar un texto en la página.

Si no establecimos los parámetros predeterminados, no pasar los valores necesarios resultará en un error, como “firstName is not added”.

Establecer parámetros predeterminados nos ayuda a evitar este error. Entonces, en cambio, el componente <Niño> reemplazará estas variables con parámetros predeterminados.

Use el parámetro defaultProps para establecer los parámetros predeterminados

Otra forma de establecer valores predeterminados es a través de la propiedad defaultProps. Reescribamos el ejemplo anterior usando este método:

const Child = ({ firstName = "Irakli", lastName = "Tchigladze" }) => {
  return (
    <div className="App">
      <h1>{firstName + " " + lastName}</h1>
    </div>
  );
};

Child.defaultProps = { firstName: "Irakli", lastName: "Tchigladze" };

En este caso, establecemos la propiedad defaultProps igual a otro objeto. El componente secundario tendrá este objeto de forma predeterminada cuando no se transmitan “accesorios” del componente principal.

Esta sintaxis es relativamente sencilla, aunque requiere algunas líneas de código adicionales.

Sin embargo, el mayor problema es que, según Dan Abramov, una de las personas destacadas detrás de React, el soporte del componente funcional para la propiedad defaultProps quedará obsoleto.

Si cree que debe preocuparse por la estabilidad a largo plazo de su proyecto, es mejor usar parámetros predeterminados en lugar de establecer accesorios predeterminados usando la propiedad defaultProps.