"Props", React'te özel bir anahtar kelimedir. Props, verileri bir bileşene iletmek için kullanılır.

Bir bileşende değişken gibi prop kullanımı yaparken, bileşenlere props nesnesi ile ulaşabiliriz.

Prop bir JavaScript nesnesidir ve prop'un içinde prop adı ve değişkeni bulunur.

Donanımlar sayesinde bileşenler arasında değer aktarımı yapabiliriz.

Bileşen 1:

import react from 'react';
import Users from './Users';

function Counter() {
  return(
    <>
      <Users name="Fatma" />
    </>
  );
}
export default Counter;

function Users(props) {
  return (
    <>
    {props.name}
    </>
  );
}
export default Users;

Her seferinde prop yazmak yerine, özelliği bileşenlerin içine yazabiliriz;
Bunun gibi;

function Users({name, age}) {
  return (
    <>
    <h1>{name} {age}</h1>
    </>
  );
}

export default Users;

Bunun amacı; herhangi bir listeleme işlemi vb. key prop iyi performans gösteren döngülerde döndürdüğümüz ifadeleri listelemek için kullanılır. En dıştaki elemana bir anahtar destek verilebilir.

Sahne Türleri

Her şeyden önce PropTypes'a import etmemiz gerekiyor.

Tanımladığımız özelliklere tipler gönderdiğimizde, component dışında tipler tanımlıyoruz.

import PropTypes from "prop-types";

function Users({name, age, answer}) {
  return (
    <>
    <h1>{name} {age}</h1>
    </>
  );
}

Users.propTypes = {
  name: PropTypes.string,
  age: PropTypes.number,
  answer: PropTypes.bool,
};

export default Users;

Props tipini belirttikten sonra yanına isRequired yazarsak o alan boş bırakılamaz.

Türünü belirttiğimiz özelliğin yanına isRequired yazıyoruz;

name: PropTypes.string.isRequired,

Bir özellik için birden fazla veri tipi gireceksek OneOfType kullanırız.

age: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

Bir nesne türü verisi girildiğinde, nesnenin alt öğelerinin türlerini tanımlamak için şekli kullanırız.

address: PropTypes.shape({title : PropTypes.string, zipCode: PropTypes.number,}),

herhangi bir tür atanmamış bir pervaneye varsayılan bir değer verebiliriz. Diğer türler dışında tanımlamamız gerekiyor.

Users.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  answer: PropTypes.bool,
  address: PropTypes.shape({title : PropTypes.string, zipCode: PropTypes.number,}),
};

Users.defaultProps = {
  answer: false,
}