Don't Call PropTypes Uyarısı

Not:

React.PropTypes React v15.5 sürümünden itibaren farklı bir pakete taşındı. Lütfen onun yerine prop-types kütüphanesini kullanın.

Dönüşümü otomatikleştirmek için bir codemod scripti sunuyoruz.

React’in gelecekteki büyük sürümünde, PropType doğrulaması yapan kod bloğu ayrıştırılacak. Bu olduğu zaman, bu kodun elle çağırıldığı yerler hata verecek.

PropTypes tanımlamak hala iyi

PropTypes’ın normal kullanımı hala destekleniyor:

Button.propTypes = {
  highlighted: PropTypes.bool
};

Burada bir şey değişmiyor.

PropTypes’ı direkt olarak çağırmayın

PropTypes’ı, React bileşenlerini açıklamak dışında başka bir şekilde kullanmak artık desteklenmemektedir.

var apiShape = PropTypes.shape({
  body: PropTypes.object,
  statusCode: PropTypes.number.isRequired
}).isRequired;

// Desteklenmiyor!
var error = apiShape(json, 'response');

Eğer PropTypes’ı bu şekilde kullanma zorunluluğunuz varsa, size PropTypes’ın bir kopyasını oluşturmanızı öneririz(Bu iki paket gibi).

Eğer uyarıyı düzeltmezseniz, bu kod React 16 sürümüyle birlikte canlı ortamda çökecektir.

Eğer PropTypes’ı direkt çağırmadığınız halde uyarı alıyorsanız

Uyarıda belirtilen çalışma betiğini inceleyin. PropTypes’ı direkt olarak çağırmaya sebep olan bileşeni bulacaksınız. Büyük ihtimalle uyarının sebebi React’in PropTypes özelliğini sarmallayarak kullanan bir 3. partidir, örneğin:

Button.propTypes = {
  highlighted: ThirdPartyPropTypes.deprecated(
    PropTypes.bool,
    'Use `active` prop instead'
  )
} 

Bu örnekte, ThirdPartyPropTypes.deprecated fonksiyonu PropTypes.bool‘u çağıran bir sarmalayıcıdır (wrapper). Bu kullanım kendi içerisinde uygun ancak React PropTypes’ı direkt çağırdınızı düşünerek yanlış pozitif olarak tetikler. Bir sonraki bölüm, ThirdPartyPropTypes gibi kütüphaneler kullandığınızda oluşan problemleri nasıl düzelteceğinizi açıklıyor. Eğer bu sizin yazdığınız bir kütüphane değilse, ilgili kütüphaneye sorun olarak bildirebilirsiniz.

Üçüncü-parti PropTypes’lardaki yanlış pozitifleri düzeltmek

Eğer üçüncü parti bir PropTypes kütüphanesinin geliştiricisi iseniz ve kullanıcılara React PropTypes’ı sarmalayan bir şey kullanmalarını sağlıyorsanız, onlar bu uyarının sizin kütüphanenizden geldiğini göreceklerdir. Bu durum, React’in el ile yapılan PropTypes çağrılarını algılamak için geçtiği “gizli” bir son argümanı görmemesi nedeniyle oluşur.

İşte bunu düzeltmenin yolu. Burada örnek olarak react-bootstrap/react-prop-types‘dan deprecated fonksiyonunu kullanacağız. Mevcut uygulamada sadece props, propName, ve componentName argümanları aşağıya gönderiliyor:

export default function deprecated(propType, explanation) {
  return function validate(props, propName, componentName) {
    if (props[propName] != null) {
      const message = `"${componentName}"in "${propName}" özelliği kullanımdan kaldırıldı.\n${explanation}`;
      if (!warned[message]) {
        warning(false, message);
        warned[message] = true;
      }
    }

    return propType(props, propName, componentName);
  };
}

Bu yanlış pozitifi düzeltmek için, bütün argümanları alttaki sarmallanan PropType’a geçtiğinizden emin olun. Bunu ES6 ...rest notasyonu ile yapmak oldukça kolaydır:

export default function deprecated(propType, explanation) {
  return function validate(props, propName, componentName, ...rest) { // Not ...rest notasyonu burada
    if (props[propName] != null) {
      const message = `"${componentName}"in "${propName}" özelliği kullanımdan kaldırıldı.\n${explanation}`;
      if (!warned[message]) {
        warning(false, message);
        warned[message] = true;
      }
    }

    return propType(props, propName, componentName, ...rest); // ve burada
  };
}

Bu, uyarıyı susturur.