propTypes
Gönderdiğiniz propsların tipini tanımlamanızı sağlayan yapılardır. Oluşturduğunuz componentlerin Stateful ve Stateless olarak farklı çeşitleri olabilir. Yazının ilerleyen kısımlarında Stateful ve Stateless farklarını anlatacağım ama şuan için PropTypes oluşturmanın iki yöntemi olduğunu bilmenizi isterim.
import { Component } from "react";
import propTypes from "prop-types";class News extends Component {
static propTypes = {
news : propTypes.array
}
render() {
return (
{this.props.news.map(news =>
{news.title}
{news.description}
)}
)
}
}
export default News; Örnek 5: Stateful componentte propTypes kullanımıimport React from "react";
import propTypes from "prop-types";const News = (props) => {
return (
{props.news.map(news =>
{news.title}
{news.description}
)}
)
}
News.propTypes = {
news: propTypes.array
}
export default News; Örnek 6: Stateless componentte propTypes kullanımı
propTypes : isRequired
Tipini belirlerken eğer belirttiğiniz tipte zorunluluk olacaksa; isRequired kullanıyoruz. Aşağıdaki örnekte news in proptypesı mutlaka array olmalı dedik.
News.propTypes = {
news: propTypes.array.isRequired
}
export default News; Örnek 7: örnek 6 da bulunan propTypesda isRequired kullanımı.
propTypes : onOfType
Propsunuzun tipini çeşitlendirmek isterseniz onOfType kullanmanız gerekmektedir. Aşağıdaki örnekte news array objesinin propTypeslarını hem array hem de string olarak belirledik ve isRequired ile zorunlu kıldık.
News.propTypes = {
news: propTypes.oneOfType([
propTypes.array,
propTypes.string
]).isRequired
}Örnek 8: örnek 6 da bulunan propTypesı oneOfType ile çeşitlendirilmesi.
propTypes : shape
Eğer size props ile bir obje gelecekse bu objenin yapısını belirleyebiliyorsunuz. Aşağıdaki örnekte news objesinin altında bulunan title ve description fieldlerinin(alan) tanımını yaptık.
News.propTypes = {
news: propTypes.shape({
title : propTypes.string,
description : propTypes.string
})
}Örnek 9: örnek 6 da bulunan propTypesı shape ile alt alanlarını çeşitlendirilmesi.