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

رد فعل الدعائم

❮ سابق التالي ❯

الدعائم هي وسيطات يتم تمريرها إلى مكونات React.

يتم تمرير الدعائم إلى المكونات عبر سمات HTML.

props لتقف على الخصائص.

رد فعل الدعائم

تعتبر React Props مثل الوسائط الوظيفية في JavaScript والسمات في HTML.

لإرسال الخاصيّات إلى مكوّن ، استخدم نفس صيغة سمات HTML:

مثال

أضف سمة "العلامة التجارية" إلى عنصر السيارة:

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

يستقبل المكون الوسيطة propsككائن:

مثال

استخدم سمة العلامة التجارية في المكون:

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

w3schools CERTIFIED . 2022

الحصول على شهادة!

أكمل وحدات React ، ونفّذ التمارين ، وخذ الامتحان واحصل على شهادة w3schools !!

95 دولارًا ENROLL

تمرير البيانات

الدعائم هي أيضًا كيفية تمرير البيانات من مكون إلى آخر ، كمعلمات.

مثال

أرسل خاصية "العلامة التجارية" من مكون Garage إلى مكون السيارة:

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'));

إذا كان لديك متغير تريد إرساله ، وليس سلسلة نصية كما في المثال أعلاه ، فكل ما عليك هو وضع اسم المتغير داخل أقواس متعرجة:

مثال

أنشئ متغيرًا اسمه carNameوأرسله إلى Carالمكون:

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'));

أو إذا كان شيئًا:

مثال

أنشئ كائنًا باسمه carInfoوأرسله إلى Carالمكون:

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'));

ملاحظة: React Props هي للقراءة فقط! سوف تحصل على خطأ إذا حاولت تغيير قيمتها.

اختبر نفسك مع التمارين

ممارسه الرياضه:

قم بإنشاء متغير يسمى name وقم بتمريره إلى مكون الرسائل.

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'));

❮ سابق التالي ❯