Declaraciones eficientes de props en componentes de React.

Cuando trabajas con componentes de React, es importante definir las props que un componente puede aceptar. Sin embargo, definir cada prop individualmente para un componente puede volverse tedioso y resultar en mucho código repetitivo.

Una forma de reducir la cantidad de código necesario para definir las props es heredar las props del elemento HTML dentro del componente. Por ejemplo, en lugar de definir todas las props para un elemento <button>, puedes heredar las props del elemento HTML y solo definir las "props" personalizadas.

Echemos un vistazo a un componente de ejemplo:

interface Props {
  onClick: () => void;
  customProp: boolean;
}

function SomeButton({ customProp = false, onClick }: Props): JSX.Element {
  if (customProp) {
    // hacer algo
  }

  return <button onClick={onClick} />;
}

En este ejemplo, el componente SomeButton tiene dos props: onClick y customProp. Si queremos agregar una prop className al botón, no podemos hacerlo porque no la hemos definido en la interfaz Props.

// esto no es válido porque no tenemos una prop `className`
<SomeButton customProp onClick={doSomething} className="p-3" />

Para resolver este problema, podemos definir las props extendiendo React.ButtonHTMLAttributes<HTMLButtonElement>. Esto significa que podemos agregar cualquier prop que acepte un botón regular.

interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  customProp?: boolean;
}

function SomeButton({ customProp = false, ...props }: Props): JSX.Element {
  if (customProp) {
    // hacer algo
  }

  return <button {...props} />;
}

Con esta implementación actualizada de SomeButton, ahora podemos agregar la prop className, junto con cualquier otra prop que acepte un botón regular.

// esto funciona
<SomeButton customProp onClick={doSomething} className="p-3" {...anyOtherProp} />

Esta técnica se puede aplicar a cualquier elemento HTML en el que se base un componente. Por ejemplo, si el componente se basa en un elemento <div>, podemos heredar las props de React.HTMLAttributes<HTMLDivElement> en su lugar.

interface Props extends React.HTMLAttributes<HTMLDivElement> {
  customProp?: boolean;
}

Al heredar props del elemento HTML dentro de un componente, podemos reducir la cantidad de código repetitivo necesario para definir las props, al tiempo que nos permite agregar cualquier prop que acepte el elemento HTML.