HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Tepki Sahne

❮ Öncesi Sonraki ❯

Proplar, React bileşenlerine iletilen argümanlardır.

Aksesuarlar, HTML nitelikleri aracılığıyla bileşenlere iletilir.

propsözellikleri ifade eder.

Tepki Sahne

React Props, JavaScript'teki işlev argümanları ve HTML'deki nitelikler gibidir.

Sahne öğelerini bir bileşene göndermek için HTML nitelikleriyle aynı sözdizimini kullanın:

Örnek

Araba öğesine bir "marka" özelliği ekleyin:

const myelement = <Car brand="Ford" />;

Bileşen, argümanı bir propsnesne olarak alır:

Örnek

Bileşende marka özelliğini kullanın:

function Car(props) {
  return <h2>I am a { props.brand }!</h2>;
}

w3schools CERTIFIED . 2022

Sertikalı olmak!

React modüllerini tamamlayın, alıştırmaları yapın, sınava girin ve w3schools sertifikalı olun!

95 $ KAYIT

Verileri Geç

Props ayrıca verileri bir bileşenden diğerine parametre olarak nasıl aktardığınızdır.

Örnek

Garaj bileşeninden "marka" özelliğini Araba bileşenine gönderin:

function Car(props) {
  return <h2>I am a { props.brand }!</h2>;
}

function Garage() {
  return (
    <>
      <h1>Who lives in my garage?</h1>
      <Car brand="Ford" />
    </>
  );
}

ReactDOM.render(<Garage />, document.getElementById('root'));

Yukarıdaki örnekte olduğu gibi bir dize değil de gönderilecek bir değişkeniniz varsa, değişken adını küme parantezlerinin içine koymanız yeterlidir:

Örnek

Adlı bir değişken oluşturun carNameve bunu Carbileşene gönderin:

function Car(props) {
  return <h2>I am a { props.brand }!</h2>;
}

function Garage() {
  const carName = "Ford";
  return (
    <>
      <h1>Who lives in my garage?</h1>
      <Car brand={ carName } />
    </>
  );
}

ReactDOM.render(<Garage />, document.getElementById('root'));

Veya bir nesne olsaydı:

Örnek

Adlı bir nesne oluşturun carInfove onu Carbileşene gönderin:

function Car(props) {
  return <h2>I am a { props.brand.model }!</h2>;
}

function Garage() {
  const carInfo = { name: "Ford", model: "Mustang" };
  return (
    <>
      <h1>Who lives in my garage?</h1>
      <Car brand={ carInfo } />
    </>
  );
}

ReactDOM.render(<Garage />, document.getElementById('root'));

Not: React Props salt okunurdur! Değerlerini değiştirmeye çalışırsanız bir hata alırsınız.

Egzersizlerle Kendinizi Test Edin

Egzersiz yapmak:

name adında bir değişken oluşturun ve bunu Message bileşenine iletin.

function Person(props) {
  return <h2>I'm { props.name }!</h2>;
}

function Greeting() {
  const name = "Jesse"
  return (
    <>
      <h1>Hello!</h1>
      <Person name= name  />
    </>
  );
}

ReactDOM.render(<Greeting />, document.getElementById('root'));

❮ Öncesi Sonraki ❯