TypeScript trenine binmemiş React geliştiricileri için PropTypes bir yaşam biçimidir. React bileşenlerimize çalışma zamanı tipi kontrolü eklemek için bunları günlük olarak kullanıyoruz.

Ancak çoğumuz yalnızca string veya number gibi yerleşik PropType'ları kullanırız . PropTypes ile daha fazla ne yapabiliriz? Kitaplıklar ve özelleştirilebilir bileşenler oluşturmamıza nasıl yardımcı olabilirler? Bunları, donanımları ve işlevleri kullanımdan kaldırmamıza yardımcı olmak için nasıl kullanabiliriz?

PropTypes'ı kullanıp kötüye kullanabileceğimiz tüm tuhaf ve harika yollara bir göz atalım.

Başlarken

Aşağıdaki bileşene bir göz atalım Button.

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;

Daha ilginç bir şey yapalım

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;

Bir dakika bekle. Her koşulda onClick gerekli midir ? Peki ya Buttondevre dışı bırakılırsa? Kullanıcı düğmeyi tıklayamıyorsa neden onClickgerekli?

PropTypesBunların sadece işlevler olduğunu biliyor muydunuz ? Neler yapabileceğimize bir göz atın.

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);
  },
};

Daha da ileri götürelim. Düğmelere benzeyen ve benzeyen bağlantılar için bazı kullanım örneklerimiz var. ButtonBunu desteklemek için kapsamımızı genişletelim .

Adlı bir pervane ekliyoruz 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])

ButtonArtık şöyle bir bağlantı oluşturabiliriz

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

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

Artık render'ımızı Buttonfarklı şekillerde desteklemeyi desteklediğimize göre, bazı zor durumlarla karşılaşabiliriz.

Buna ne dersin?

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

onClickBu durumla ilgilenen özel bir işleyici tanımlayalım .

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

onClickAncak artık bir işlevi devre dışı bırakıldığımızda Buttonherhangi bir uyarı almıyoruz.

PropType'ımızı tekrar güncelleyelim onClick.

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);
}

Bu geliştirilmiş PropType'lar, hataların üretime geçmeden önce yakalanmasını kolaylaştırır. Anlaşılması kolay ve kullanımı kolaydır. Bir sonrakine kadar!