PropTypes ile Tip Kontrolü

These docs are old and won’t be updated. Go to react.dev for the new React docs.

PropTypes aren’t commonly used in modern React. Use TypeScript for static type checking.

Not:

React.PropTypes React v15.5’ten bu yana farklı bir pakete taşındı. Lütfen bunun yerine prop-types kütüphanesini kullanın.

Dönüştürme işlemini otomatikleştirmek için bir codemod script‘i sunuyoruz.

Uygulamanız büyüdükçe, tip kontrolü ile birçok hata yakalayabilirsiniz. Bazı uygulamalarda, tüm uygulamanız üzerinde tip kontrolü yapmak için Flow veya TypeScript gibi JavaScript uzantılarını kullanabilirsiniz. Ama bunları kullanmasanız bile, React bazı yerleşik tip kontrolü yeteneklerine sahiptir. Bir bileşenin prop’ları üzerinde tip kontrolü yapmak için, özel propTypes niteliğini atayabilirsiniz:

import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};

Bu örnekte, bir sınıf bileşeni kullanıyoruz, ancak aynı işlevsellik fonksiyon bileşenlerine, veya React.memo veya React.forwardRef tarafından oluşturulan bileşenlere de uygulanabilir.

PropTypes alınan verilerin geçerli olduğundan emin olmak için kullanılabilecek bir dizi doğrulayıcı verir. Bu örnekte, PropTypes.string‘i kullanıyoruz. Bir prop için geçersiz bir değer sağlandığında, JavaScript konsolunda bir uyarı gösterilecektir. Performans nedeniyle, propTypes sadece geliştirme modunda kontrol edilir.

PropTypes

İşte sağlanan çeşitli doğrulayıcıları gösteren bir örnek:

import PropTypes from 'prop-types';

MyComponent.propTypes = {
  // Bir prop'un belirli bir JS türü olduğunu belirtebilirsiniz.
  // Varsayılan olarak, bunların hepsi isteğe bağlıdır.
  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol,

  // Render edilebilecek her şey: sayılar, dizeler, elemanlar veya bir dizi
  // (veya fragment) bu türleri içeren.
  optionalNode: PropTypes.node,

  // React elemanı.
  optionalElement: PropTypes.element,
  
  // Bir React Eleman Tipi (Örnek: MyComponent).
  optionalElementType: PropTypes.elementType,
  
  // Bir prop'un sınıf nesnesi olduğunu da belirtebilirsiniz.
  // Bu JS'in instanceof operatörünü kullanır.
  optionalMessage: PropTypes.instanceOf(Message),

  // Bir prop'un enum olarak değerlendirilerek
  // belirli değerlerle sınırlı olmasını sağlayabilirsiniz.
  optionalEnum: PropTypes.oneOf(['Haberler', 'Fotoğraflar']),

  // Birçok türden birinin olabileceği bir nesne
  optionalUnion: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.instanceOf(Message)
  ]),

  // Belirli bir türde bir dizi
  optionalArrayOf: PropTypes.arrayOf(PropTypes.number),

  // Belirli bir türde özellik değerlerine sahip bir nesne
  optionalObjectOf: PropTypes.objectOf(PropTypes.number),

  // Belirli bir şekildeki nesne
  optionalObjectWithShape: PropTypes.shape({
    color: PropTypes.string,
    fontSize: PropTypes.number
  }),

  // An object with warnings on extra properties
  optionalObjectWithStrictShape: PropTypes.exact({
    name: PropTypes.string,
    quantity: PropTypes.number
  }),   

  // Prop'un sağlanmadığı durumlarda bir uyarının gösterildiğinden emin olmak için,
  // yukarıdakilerden herhangi birini `isRequired` ile zincirleyebilirsiniz.
  requiredFunc: PropTypes.func.isRequired,

  // Herhangi bir gerekli (required) veri türünün değeri
  requiredAny: PropTypes.any.isRequired,

  // Özel bir doğrulayıcı da belirtebilirsiniz.
  // Doğrulama başarısız olursa bir Error nesnesi döndürmelidir.
  // `console.warn` veya `throw` kullanmayın, çünkü bu `oneOfType` içinde çalışmayacaktır.
  customProp: function(props, propName, componentName) {
    if (!/matchme/.test(props[propName])) {
      return new Error(
        'Invalid prop `' + propName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  },

  // Ayrıca `arrayOf` ve `objectOf`'lara özel bir doğrulayıcı da belirtebilirsiniz.
  // Doğrulama başarısız olursa bir Error nesnesi döndürmelidir.
  // Doğrulayıcı, dizideki veya nesnedeki her anahtar için çağrılacaktır.
  // Doğrulayıcının ilk iki argümanı dizi veya nesnenin kendisi
  // ve geçerli öğenin anahtarıdır.
  customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
    if (!/matchme/.test(propValue[key])) {
      return new Error(
        'Invalid prop `' + propFullName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  })
};

Tek Alt Eleman Gerektirmek

PropTypes.element ile, yalnızca tek bir elemanın bir bileşene alt eleman olarak geçeceğini belirtebilirsiniz.

import PropTypes from 'prop-types';

class MyComponent extends React.Component {
  render() {
    // Bu kesinlikle tek bir eleman olmalı; aksi takdirde uyarı verecektir.
    const children = this.props.children;
    return (
      <div>
        {children}
      </div>
    );
  }
}

MyComponent.propTypes = {
  children: PropTypes.element.isRequired
};

Varsayılan Prop Değerleri

Özel defaultProps niteliğine atama yaparak, prop‘larınız için varsayılan değerleri tanımlayabilirsiniz:

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

// Prop'lar için varsayılan değerleri belirtir:
Greeting.defaultProps = {
  name: 'Stranger'
};

// "Hello, Stranger" yazısını render eder:
const root = ReactDOM.createRoot(document.getElementById('example'));
root.render(<Greeting />);

ES2022 ile birlikte, defaultProps‘u bir React bileşen sınıfında statik özellik olarak da tanımlayabilirsiniz. Daha fazla bilgi için class public static fields sayfasına göz atın. Bu modern sözdiziminin eski tarayıcılarda çalışması için fazladan bir derleme adımı gerekmektedir.

class Greeting extends React.Component {
  static defaultProps = {
    name: 'stranger'
  }

  render() {
    return (
      <div>Hello, {this.props.name}</div>
    )
  }
}

this.props.name‘in üst bileşen tarafından belirtilen bir değerinin olmadığı durumlarda, varsayılan bir değere sahip olmasını sağlamak için defaultProps kullanılır. propTypes tip kontrolü defaultProps çözümlendikten sonra gerçekleşir, bu nedenle tip kontrolü defaultProps için de geçerli olacaktır.

Fonksiyon Bileşenleri

Geliştirme sırasında düzenli olarak fonksiyon bileşenlerini kullanıyorsanız, PropTypes ın düzgün bir şekilde uygulanması için bazı küçük değişiklikler yapmak isteyebilirsiniz.

Diyelim ki böyle bir bileşeniniz var:

export default function HelloWorldComponent({ name }) {
  return (
    <div>Hello, {name}</div>
  )
}

PropTypes ları eklemek için, bileşeninizi dışarı çıkarmadan önce (exportıng) ayrı bir fonksiyon içinde tanımlamak isteyebilirsiniz:

function HelloWorldComponent({ name }) {
  return (
    <div>Hello, {name}</div>
  )
}

export default HelloWorldComponent

Artık PropTypes’ları direkt olarak HelloWorldComponent bileşenine ekleyebilirsiniz:

import PropTypes from 'prop-types'

function HelloWorldComponent({ name }) {
  return (
    <div>Hello, {name}</div>
  )
}

HelloWorldComponent.propTypes = {
  name: PropTypes.string
}

export default HelloWorldComponent

Bu sayfayı yararlı buldun mu?Bu sayfayı düzenle