React Props Nedir?

React'ta props (kısaltma: properties), bir bileşene veri veya işlevsellik aktarmak için kullanılan bir mekanizmadır. props, bir bileşenden başka bir bileşene veri akışını sağlar ve bileşenler arasındaki iletişimi kolaylaştırır.

Bir bileşene props kullanarak veri aktarımı, ebeveyn bileşenin props'ları aracılığıyla gerçekleştirilir. Ebeveyn bileşen, çocuk bileşenlere belirli verileri veya işlevleri props olarak geçirir ve çocuk bileşen bu props'ları alarak kullanır.

İşte props kullanımını açıklayan örnekler:

React'ta props (kısaltma: properties), bir bileşene veri veya işlevsellik aktarmak için kullanılan bir mekanizmadır. Bir bileşen, props aracılığıyla ebeveyn bileşeninden aldığı verilere veya işlevlere erişebilir.

İşte props kullanımının örnekleri:

name prop örneği:

  

// Ebeveyn bileşen
function ParentComponent() {
  return <ChildComponent name="John" />;
}

// Çocuk bileşen
function ChildComponent(props) {
  return <p>Merhaba, {props.name}!</p>;
}

Yukarıdaki örnekte, ParentComponent adında bir ebeveyn bileşen ve ChildComponent adında bir çocuk bileşen bulunmaktadır. ParentComponent, ChildComponent'e name prop'uyla "John" değerini geçiriyor. ChildComponent, props parametresi aracılığıyla name prop'una erişip ekrana "Merhaba, John!" yazdırıyor.

React'ta props (kısaltma: properties), bir bileşene veri veya işlevsellik aktarmak için kullanılan bir mekanizmadır. Bir bileşen, props aracılığıyla ebeveyn bileşeninden aldığı verilere veya işlevlere erişebilir.

color prop örneği:

  

// Ebeveyn bileşen
function ParentComponent() {
  return <ChildComponent color="blue" />;
}

// Çocuk bileşen
function ChildComponent(props) {
  return <div style={{ backgroundColor: props.color }}>Bu bir örnek bileşen.</div>;
}

Bu örnekte, ParentComponent ChildComponent'e color prop'uyla "blue" değerini geçiriyor. ChildComponent bu prop'u alıp bir div bileşeninin arka plan rengini bu değerle ayarlıyor. Sonuç olarak, ekranda arka planı mavi olan bir div görüntülenir.

Basit veri aktarımı:

// Ebeveyn bileşen
function ParentComponent() {
  const name = "John";
  const age = 25;
  return <ChildComponent name={name} age={age} />;
}

// Çocuk bileşen
function ChildComponent(props) {
  return (
    <div>
      <p>İsim: {props.name}</p>
      <p>Yaş: {props.age}</p>
    </div>
  );
}

Yukarıdaki örnekte, ParentComponent adında bir ebeveyn bileşen ve ChildComponent adında bir çocuk bileşen bulunmaktadır. ParentComponent, ChildComponent'e name ve age prop'larını geçiriyor. ChildComponent, bu prop'ları alarak ekranda gösteriyor. Sonuç olarak, ChildComponent'te "İsim: John" ve "Yaş: 25" yazısı görüntülenir.

İşlevsel prop'lar:

// Ebeveyn bileşen
function ParentComponent() {
  function handleClick() {
    console.log("Butona tıklandı!");
  }
  return <Button onClick={handleClick} />;
}

// Buton bileşeni
function Button(props) {
  return <button onClick={props.onClick}>Tıkla</button>;
}

Bu örnekte, ParentComponent adında bir ebeveyn bileşen ve Button adında bir çocuk bileşen bulunmaktadır. ParentComponent, Button bileşenine onClick adında bir işlevi props olarak geçirir. Button bileşeni, onClick prop'unu alır ve bu prop'u bir button bileşeni üzerinde tıklanma olayına atar. Sonuç olarak, Button bileşeni tıklandığında "Butona tıklandı!" mesajını konsola yazdırır.

Liste veri aktarımı:

  
// Ebeveyn bileşen
function ParentComponent() {
  const cities = ["İstanbul", "Ankara", "İzmir"];
  return <CityList cities={cities} />;
}

// Şehir Listesi bileşeni
function CityList(props) {
  return (
    <ul>
      {props.cities.map((city) => (
        <li key={city}>{city}</li>
      ))}
    </ul>
  );
}

Bu örnekte, ParentComponent adında bir ebeveyn bileşen ve CityList adında bir çocuk bileşen bulunmaktadır. ParentComponent, CityList bileşenine cities prop'unu geçirir. CityList bileşeni, cities prop'unu alır ve bu listedeki her bir şehri bir li elemanı olarak ekranda görüntüler. Sonuç olarak, CityList bileşeni cities prop'undaki şehirleri liste şeklinde gösterir.

Nesne şeklinde veri aktarımı:

// Ebeveyn bileşen
function ParentComponent() {
  const person = {
    name: "Alice",
    age: 30,
    city: "New York",
  };
  return <PersonInfo person={person} />;
}

// Kişi Bilgisi bileşeni
function PersonInfo(props) {
  return (
    <div>
      <p>İsim: {props.person.name}</p>
      <p>Yaş: {props.person.age}</p>
      <p>Şehir: {props.person.city}</p>
    </div>
  );
}

Bu örnekte, ParentComponent adında bir ebeveyn bileşen ve PersonInfo adında bir çocuk bileşen bulunmaktadır. ParentComponent, PersonInfo bileşenine person prop'unu geçirir. PersonInfo bileşeni, person prop'unu alır ve bu prop içindeki özelliklere erişerek kişi bilgilerini ekranda görüntüler.

İç içe bileşenlerde veri aktarımı:

  

// Ebeveyn bileşen
function ParentComponent() {
  const message = "Merhaba";
  return (
    <div>
      <ChildComponent message={message} />
    </div>
  );
}

// Çocuk bileşen
function ChildComponent(props) {
  return <p>{props.message}, Dünya!</p>;
}

Bu örnekte, ParentComponent adında bir ebeveyn bileşen ve ChildComponent adında bir çocuk bileşen bulunmaktadır. ParentComponent, ChildComponent'i içerisinde message prop'uyla birlikte kullanır. ChildComponent, message prop'unu alarak ekrana "Merhaba, Dünya!" yazdırır.

Varsayılan prop değerleri:

// Buton bileşeni
function Button(props) {
  return (
    <button style={{ backgroundColor: props.color }}>
      {props.text}
    </button>
  );
}

Button.defaultProps = {
  color: "blue",
  text: "Tıkla",
};

// Ebeveyn bileşen
function ParentComponent() {
  return <Button />;
}

Bu örnekte, Button bileşeni color ve text adında iki adet prop alır. Ancak, ParentComponent bu prop'ları belirtmeden Button bileşenini kullanır. Button bileşeni, defaultProps özelliği aracılığıyla color ve text prop'ları için varsayılan değerleri belirler. Böylece, eğer ParentComponent Button bileşenini kullanırken belirli bir color veya text prop'u vermezse, varsayılan değerler olan mavi renk ve "Tıkla" metni kullanılır.

Bu kod, bir React bileşeni olan "Button" bileşenine varsayılan prop değerleri atamak için kullanılır. React'ta, bir bileşene önceden tanımlı varsayılan prop değerleri belirlemek için "defaultProps" özelliği kullanılır.

Button.defaultProps = {
  color: "blue",
  text: "Tıkla",
};

Bu kod parçasında, "Button" bileşenine iki adet varsayılan prop değeri atanıyor:

color: "blue": Eğer "Button" bileşeni kullanılırken "color" prop'u belirtilmezse, bu bileşenin varsayılan "color" değeri "blue" olarak kullanılacaktır.

text: "Tıkla": Eğer "Button" bileşeni kullanılırken "text" prop'u belirtilmezse, bu bileşenin varsayılan "text" değeri "Tıkla" olarak kullanılacaktır.

Örnek olarak, "Button" bileşenini kullanırken bu varsayılan değerlerden birini veya her ikisini de belirtmezseniz, bileşen bu varsayılan değerleri kullanarak ekranda görüntülenecektir:

import React from 'react';

function Button({ color, text }) {
  return (
    <button style={{ backgroundColor: color }}>
      {text}
    </button>
  );
}

Button.defaultProps = {
  color: "blue",
  text: "Tıkla",
};

export default Button;

Bu şekilde "Button" bileşenini kullanırken, renk veya metin belirtmediğinizde bileşen varsayılan değerlerle oluşturulacaktır:

  

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

function App() {
  return (
    <div>
      <h1>Varsayılan Prop Değerleri Kullanımı</h1>
      {/* "color" ve "text" prop'ları belirtilmediği için varsayılan 
      değerler kullanılacak */}

      <Button />

      {/* "color" prop'u belirtilmedi, "text" prop'u belirtildi */}

      <Button text="Bas!" />

      {/* Hem "color" hem de "text" prop'ları belirtildi */}
      
      <Button color="red" text="Gönder" />
    </div>
  );
}

export default App;

Sonuç olarak, "Button" bileşeni varsayılan prop değerlerini kullanarak, belirli prop değerleri belirtilmediğinde bile bileşenin düzgün bir şekilde çalışmasını ve görüntülenmesini sağlar.

Farklı uygulama yöntemleri:

  

// Ebeveyn bileşen
function ParentComponent() {
  return (
    <div>
      <ChildComponent name="Alice" />
    </div>
  );
}

// Çocuk bileşen
function ChildComponent(props) {
  // props ile verilere erişim
  return <p>Merhaba, {props.name}!</p>;
}

Yukarıdaki örnekte, ParentComponent bir ChildComponent bileşenini kullanıyor ve name prop'unu "Alice" olarak geçiriyor. ChildComponent içinde, props aracılığıyla verilere erişiliyor ve ekrana "Merhaba, Alice!" yazdırılıyor.

props.children kullanarak içerik ile çalışma:

  

// Ebeveyn bileşen
function ParentComponent() {
  return (
    <Container>
      <p>Bu bir örnek paragraf</p>
    </Container>>
  );
}

// Container bileşeni
function Container(props) {
  return <div>{props.children}</div>;
}

Bu örnekte, ParentComponent bir Container bileşenini kullanıyor ve içine bir p elementini ekliyor. Container bileşeni, props.children'ı kullanarak içerikle çalışır ve bu içeriği (p elementi) ekranda görüntüler.

Bu basitleştirilmiş örneklerde, props'ların temel kullanımını ve props.children ile içerikle çalışmayı gösterdim. React'ta props'lar, veri ve işlevsellik aktarımını sağlayan önemli bir mekanizmadır.

Stil aktarımı için props:

  

// Ebeveyn bileşen

function ParentComponent() {
  return <StyledButton color="blue">Tıkla</StyledButton>;
}

// Stil uygulanan buton bileşeni

function StyledButton(props) {
  const buttonStyle = {
    backgroundColor: props.color,
    color: "white",
    padding: "10px 20px",
    borderRadius: "5px",
  };

  return <button style={buttonStyle}>{props.children}</button>;
}

Bu örnekte, ParentComponent bir StyledButton bileşenini kullanıyor ve color prop'unu "blue" olarak geçiriyor. StyledButton bileşeni, color prop'unu alarak bir buton bileşenini stilize ediyor ve ekranda görüntülüyor.

İşlevsellik aktarımı için props:

  

// Ebeveyn bileşen
function ParentComponent() {
  function handleClick() {
    console.log("Butona tıklandı!");
  }

  return <Button onClick={handleClick}>Tıkla</Button>;
}

// Tıklama olayını tetikleyen buton bileşeni
function Button(props) {
  return (
    <button onClick={props.onClick}>
      {props.children}
    </button>
  );
}

Bu örnekte, ParentComponent bir Button bileşenini kullanıyor ve onClick prop'una bir işlevi (handleClick) geçiriyor. Button bileşeni, tıklama olayını tetikleyen bir buton oluşturuyor ve onClick prop'una atanan işlevi çağırıyor.

Koşullu içerik ile props kullanımı:

// Ebeveyn bileşen
function ParentComponent() {
  const isLoggedIn = true;

  return (
    <div>
      {isLoggedIn ? (
        <UserGreeting name="Alice" />
      ) : (
        <GuestGreeting />
      )}
    </div>
  );
}

// Giriş yapmış kullanıcı mesajı bileşeni
function UserGreeting(props) {
  return <p>Hoş geldin, {props.name}!</p>;
}

// Misafir kullanıcı mesajı bileşeni
function GuestGreeting() {
  return <p>Lütfen giriş yapın.</p>;
}

Bu örnekte, ParentComponent bir isLoggedIn durumunu kullanarak koşullu içerik oluşturuyor. Eğer kullanıcı giriş yapmışsa, UserGreeting bileşeni name prop'uyla görüntülenir. Aksi takdirde, GuestGreeting bileşeni görüntülenir.

Bu örneklerde, farklı senaryolarda props kullanımını gösterdim. props'lar, veri, işlevsellik, stillendirme veya koşullu içerik gibi birçok durumda React bileşenleri arasında veri aktarımını sağlar.

Bileşende Nesne gönderme

NesneGonder fonksiyon tabanlı bileşen:

import React from 'react';

// Fonksiyon tabanlı bileşen tanımlıyoruz
function NesneGonder({ adi, gonderilecekNesne }) {
  return (
    <div>
      <h2>Bu, nesneyi aldığımız bileşen</h2>
      <p>Buton Adı: {adi}</p>
      <p>Nesne içeriği:</p>
      <ul>
        <li>Ad: {gonderilecekNesne.ad}</li>
        <li>Özellik: {gonderilecekNesne.ozellik}</li>
      </ul>
    </div>
  );
}

export default NesneGonder;

App fonksiyon tabanlı bileşen:

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

function App() {
  // Tek bir nesne oluşturuyoruz
  const ornekNesne = {
    ad: "Örnek Nesne",
    ozellik: "Bu bir örnek"
  };

  return (
    <div>
      <h1>Bir Nesneyi Bileşende Gönderme Örneği</h1>
      {/* Fonksiyon tabanlı bileşeni kullanırken buton adını ve nesneyi props olarak iletiyoruz */}
      <NesneGonder adi="nesne" gonderilecekNesne={ornekNesne} />
    </div>
  );
}

export default App;

Varsayılı prop değerine örnek ver

Varsayılan prop değeri, eğer bir bileşene belirli bir prop geçirilmezse, o prop için kullanılacak önceden tanımlanmış değerdir. Bu, bileşenin daha esnek ve hataya karşı daha dayanıklı olmasına yardımcı olabilir, çünkü bileşene gerekli olan veriler geçirilmezse, varsayılan değer kullanılır.

Aşağıda, bir bileşende varsayılan prop değerini kullanmak için örnek bir React fonksiyon tabanlı bileşeni verilmiştir:

  
import React from 'react';

// Bileşeni tanımlıyoruz ve varsayılan prop değerini belirtiyoruz
function MyComponent({ adi, yas = 25 }) {
  return (
    <div>
      <h2>Merhaba, {adi}!</h2>
      <p>Yaşınız: {yas}</p>
    </div>
  );
}

export default MyComponent;

Bu örnekte, MyComponent adında bir fonksiyon tabanlı bileşen tanımlıyoruz. Bileşen iki prop alır: adi ve yas. yas prop'u için varsayılan değer olarak 25 belirtiyoruz.

Şimdi, bu bileşeni kullanırken:

  

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

function App() {
  return (
    <div>
      <h1>Varsayılan Prop Değerine Örnek</h1>
      <MyComponent adi="Ahmet" />
      <MyComponent adi="Mehmet" yas={30} />
    </div>
  );
}

export default App;

Bu şekilde, MyComponent bileşenini iki farklı şekilde kullanıyoruz:

İlk kullanımda, sadece adi prop'u geçiriyoruz ve yas prop'u geçirmediğimiz için varsayılan değeri olan 25 kullanılır.

İkinci kullanımda, hem adi hem de yas prop'larını geçiriyoruz ve bu kez yas için belirli bir değer olan 30'u kullanıyoruz.

Sonuçta, MyComponent bileşeni, yas prop'unun belirli bir değeri olup olmadığına bakmaksızın çalışır ve ekranda kullanıcı adını ve varsayılan veya belirtilen yaş değerini görüntüler.

3513

Gönder