Kaan Gedikli

Props (properties) bileşenler arasında veri ve fonksiyonları paylaşmak için kullanılan mekanizmalardır. Bir bileşen, ebeveyn bileşenden aldığı verilere ve işlevlere props aracılığıyla erişebilir.

Bir bileşenin props alabilmesi için, ona bir nesne olarak iletilmelidir. Bu nesne, bileşenin yaratıldığı yerde tanımlanır ve bileşenin içinde okunabilir bir şekilde kullanılabilir. Her zamanki gibi metinsel ifadeden pek bir şey anlaşılamadığını düşündüğüm için bir örnekle göstermeye devam edelim:

// ParentComponent.jsx

import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const name = 'John';
  const age = 25;

  return (
    <div>
      <ChildComponent name={name} age={age} />
    </div>
  );
}

export default ParentComponent;

// ChildComponent.jsx

import React from 'react';

function ChildComponent(props) {
  return (
    <div>
      <h2>Name: {props.name}</h2>
      <h2>Age: {props.age}</h2>
    </div>
  );
}

export default ChildComponent;

Yukarıdaki örnekte, ParentComponent adlı bileşen, name ve age adlı iki props oluşturur ve bunları ChildComponent bileşenine ileterek paylaşır. ChildComponent bileşeninde, props parametresi alınır ve bu props’lar üzerinden verilere erişilir.

Burada ChildComponent bileşeni, props’ları kullanarak name ve age verilerini görüntüler. Props’lara erişmek için props.name ve props.age şeklinde kullanılır.

ParentComponent bileşeninde, name ve age değişkenleri tanımlanır ve ChildComponent bileşenine bu değişkenler props olarak geçirilir.