Use el operador de propagación para pasar todos los accesorios en React

A los desarrolladores web les encanta React porque les permite crear un componente reutilizable y evitar escribir código innecesario. Sin embargo, reutilizar componentes no es simplemente pegar un nombre de variable que almacena un elemento específico para evitar repeticiones.

El sistema de componentes en React es avanzado y le permite personalizar el contenido interno, la apariencia e incluso la funcionalidad de los componentes secundarios. Es posible gracias al objeto props, que se utiliza para pasar valores de padres a hijos.

Este artículo describe cómo pasar todos los “accesorios” a los elementos secundarios y manejar una cantidad impredecible de valores pasados a través de los “accesorios” dentro de los componentes secundarios.

Use el operador Spread (...) para pasar todos los props

La sintaxis spread es una característica nueva en JavaScript. Tiene una funcionalidad diferente cuando se usa con arreglos, cadenas y objetos. En este caso, usamos el objeto props para pasar valores del padre al hijo.

La sintaxis de spread es simple. Imaginemos que tienes un objeto con múltiples propiedades:

const obj {
    propertyOne: 1,
    propertyTwo: 2,
    propertyThree: 3,
    propertyFour: 4
}

Puede copiar todos los pares clave-valor en otro objeto usando tres puntos (...):

const copy = {...obj}

Al usar props, el objeto props almacena todas las propiedades que desea transmitir manualmente. Si tiene un objeto props separado, simplemente puede usar la misma sintaxis spread para copiar todos los valores del objeto existente y pasarlo.

Veamos un ejemplo a continuación:

export default function App() {
  const props = { firstName: "Irakli", lastName: "Tchigladze" };
  return (
    <div className="App">
      <Hello {...props} />
    </div>
  );
}

function Hello({ firstName, lastName }) {
  return (
    <div>
      <h1>Hello, {firstName + " " + lastName}</h1>
    </div>
  );
}

De esta forma, no tenemos que establecer atributos para el componente <Hello> uno por uno. En su lugar, todas las propiedades del objeto props estarán disponibles en el componente secundario. Por ejemplo, vea el resultado de la valla de código anterior a continuación.

Producción :

Hello, Irakli Tchigladze

Pasar todos los accesorios excepto uno

También puede pasar algunos valores del objeto props pero excluir una o dos propiedades.

export default function App() {
  const props = { size: 20, firstName: "Irakli", lastName: "Tchigladze" };
  const { size, ...other } = props;
  return (
    <div className="App" style={{ fontSize: size }}>
      <Hello {...props} />
    </div>
  );
}

function Hello({ firstName, lastName }) {
  return (
    <div>
      <h1>Hello, {firstName + " " + lastName}</h1>
    </div>
  );
}

En este ejemplo, nuestro objeto props tiene tres propiedades: size, firstName y lastName.

Usamos la desestructuración para consumir de manera segura la propiedad tamaño para diseñar nuestros elementos (especifique el tamaño de fuente). Pero aún podemos pasar el resto de las propiedades al componente <Child>.