01.06.02. PropTypes ve defaultProps

Bileşen tanımlamaları yaparken hangi özellikler için donatıldığını belirtmekte uygulama açısından önem taşır. Tek kişilik projeler için bu bölüm gereksiz gibi görülse de, büyük projeler için özelliklerin açık bir şekilde tanımlanması önemlidir. Bu tanımlama işlemi için PropTypes özelliği üzerinden yapılır. Bu özellik aslında bir ön kontrol işlemi olarak ta görülebilir. Ayrıca, DefaultProps üzerinden değişkenlere veri atayabiliriz.

Örneğin,

import React, { Component } from 'react';
import propTypes from 'prop-types';
//Diğer kodlar burada...
class App05 extends Component {
  render() { return (
    <h1 style={{
      backgroundColor: this.props.renk ? 'red' : 'white',
      fontSize: this.props.boyut + 'px'
    }}>Merhaba2, {this.props.ad} {this.props.soyad}</h1>
  );
  }
}

App05.propTypes = { 
  ad: propTypes.string.isRequired,
  soyad: propTypes.string,
  renk: propTypes.bool,
  fontSize: propTypes.number
};

App05.defaultProps = { 
  ad: "Erdinç",
  soyad: "Uzun",
  renk: true,
  fontSize: 20
};

export {App01, App02, App03, App04, App05}
export default App05;

import React, { Component } from 'react';

import propTypes from 'prop-types';

//Diğer kodlar burada...

class App05 extends Component {

render() { return (

<h1 style={{

backgroundColor: this.props.renk ? 'red' : 'white',

fontSize: this.props.boyut + 'px'

}}>Merhaba2, {this.props.ad} {this.props.soyad}</h1>

);

}

App05.propTypes = {

ad: propTypes.string.isRequired,

soyad: propTypes.string,

renk: propTypes.bool,

fontSize: propTypes.number

};

App05.defaultProps = {

ad: "Erdinç",

soyad: "Uzun",

renk: true,

fontSize: 20

};

export {App01, App02, App03, App04, App05}

export default App05;

Öncelikle yeni bir import ile karşı karşıyayız.

import propTypes from ‘prop-types’;

Bu import sayesinde PropTypes sisteme yüklendi. Bu örnekte, bir önceki örnekten farklı olarak tüm işlemleri App05 içine aldım. (React bölümünü kısa geçeceğim için elimden geldiği kadar farklı kodlar yazıyorum.) propTypes direkt sınıf üzerinden çağrılır ve tüm değişkenlere ve hatta fonksiyonlara kural tanımlanabilir. DefaultProps üzerinden veriler gönderilir. Öncelikle normal bir şekilde sonucu tarayıcı da görelim. Şimdi ise bir değişkeni silelim ve sonuca tekrar bakalım. Sorun yok!!! PropTypes hataları direkt tarayıcı görüntüsüne yansımaz, tarayıcının Console ekranını açıp hataları görebilirsiniz.