Para desenvolvedores React que ainda não embarcaram no trem TypeScript, PropTypes são um estilo de vida. Nós os usamos diariamente para adicionar verificação de tipo em tempo de execução aos nossos componentes React.

Mas a maioria de nós usa apenas PropTypes integrados como string ou number . O que mais podemos fazer com PropTypes? Como eles podem nos ajudar a construir bibliotecas e componentes personalizáveis? Como podemos usá-los para nos ajudar a descontinuar adereços e funcionalidades?

Vamos dar uma olhada em todas as maneiras estranhas e maravilhosas que podemos usar e abusar de PropTypes.

Começando

Vamos dar uma olhada no seguinte Buttoncomponente.

import React from 'react';
const Button = props => {
  return <button {...props}>{props.children}</button>;
};
export default Button;

import React from 'react';
import PropTypes from 'prop-types';
const Button = props => {
  return <button {...props}>{props.children}</button>;
};
Button.propTypes = {
  children: PropTypes.node,
};
export default Button;

Vamos fazer algo mais interessante

import React from 'react';
import PropTypes from 'prop-types';
const Button = props => {
  return (
    <button
      {...props}
      onClick={props.onClick}
      aria-disabled={props.disabled}
      disabled={props.disabled}
    >
      {props.children}
    </button>
  );
};
Button.propTypes = {
  children: PropTypes.node,
  disabled: PropTypes.bool,
  onClick: PropTypes.func.isRequired,
};
export default Button;

Espere um minuto. O onClick deve ser obrigatório em todas as circunstâncias? E se o Buttonestiver desativado? Se o usuário não consegue clicar no botão, por que é onClickobrigatório?

Você sabia que PropTypessão apenas funções? Dê uma olhada no que podemos fazer.

Button.propTypes = {
  children: PropTypes.node,
  disabled: PropTypes.bool,
  onClick(props, ...rest) {
    if (!props.disabled) {
      return PropTypes.func.isRequired(props, ...rest);
    }
    return PropTypes.func(props, ...rest);
  },
};

Vamos ir ainda mais longe. Temos alguns casos de uso para links que se parecem com botões. Vamos estender nosso Buttonpara apoiar isso.

Adicionamos um suporte chamado as.

const Button = props => {
  const Element = props.as || 'button';
  return (
    <Element
      {...props}
      onClick={props.onClick}
      aria-disabled={props.disabled}
      disabled={props.disabled}
    >
      {props.children}
    </Element>
  );
};
Button.propTypes = {
  as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
  children: PropTypes.node,
  disabled: PropTypes.bool,
  onClick(props, ...rest) {
    if (!props.disabled) {
      return PropTypes.func.isRequired(props, ...rest);
    }
    return PropTypes.func(props, ...rest);
  },
};

PropTypes.oneOfType([PropTypes.string, PropTypes.elementType])

Agora podemos renderizar um link Buttonassim

<Button as="a" href="https://google.com">Google</Button>

import { Link } from 'react-router-dom';
<Button as={Link} to="/foo/bar">Foo</Button>

Agora que oferecemos suporte à renderização Buttonde diferentes maneiras, podemos nos deparar com algumas situações complicadas.

Que tal este?

<Button as="a" href="https://google.com" disabled>Google</Button>

Vamos definir um onClickmanipulador personalizado que cuide desse caso.

const onClick = event => {
  if (props.disabled) {
    event.preventDefault();
    return false;
  }
  if (props.onClick) {
    return props.onClick(event);
  }
  return false;
};

Mas agora, quando passamos uma onClickfunção para disabled Button, não recebemos nenhum aviso.

Vamos atualizar nosso onClickPropType novamente.

onClick(props, propName, componentName, ...rest) {
  if (props.disabled) {
    throw new Error(
      `${componentName}: onClick has no effect when disabled is set`
    );
  }
  if (!props.disabled) {
    return PropTypes.func.isRequired(props, ...rest);
  }
  return PropTypes.func(props, ...rest);
}

Esses PropTypes aprimorados facilitam a detecção de bugs antes que eles cheguem à produção. Eles são fáceis de entender e usar. Até a próxima vez!