Props وState في React

يُعدّ كل من props وstate مفهومين أساسيين في React لإدارة البيانات. فهما يتيحان جعل المكوّنات ديناميكية وتفاعلية.

الـ Props

الـ props (الخصائص) هي وسيلة لتمرير البيانات من مكوّن أب إلى مكوّن ابن. وهي للقراءة فقط، ولا يمكن للمكوّن الابن تعديلها.

استخدام الـ props

// Composant enfant
function UserCard({ name, age, email }) {
  return (
    <div className="user-card">
      <h2>{name}</h2>
      <p>Âge : {age}</p>
      <p>Email : {email}</p>
    </div>
  );
}

// Composant parent
function App() {
  return (
    <div className="app">
      <UserCard
        name="Marie Dupont"
        age={25}
        email="marie@example.com"
      />
    </div>
  );
}

الـ Props الافتراضية

يمكنك تعريف قيم افتراضية للـ props:

function Button({ text = "Cliquez-moi", onClick }) {
  return <button onClick={onClick}>{text}</button>;
}

Props.children

تتيح الخاصية الخاصة children تمرير محتوى بين وسمَي المكوّن:

function Card({ children }) {
  return <div className="card">{children}</div>;
}

// Utilisation
<Card>
  <h2>Titre</h2>
  <p>Contenu</p>
</Card>