Props چیست؟ ارسال داده parent به child بدون state

parent data رو به child نمی‌تونی بفرستی؟😤 props بدون state جادو می‌کنه! props در React آموزش کامل propsمثل parcel هست parent data رو به child می‌فرسته، مثال واقعی: user profile

JSX

// Parent: App
function App() {
  const user = { name:"علی", age:25, city:"تهران" };
  
  return (
    <div>
      <UserProfile 
        name={user.name}
        age={user.age}
        city={user.city}
      />
    </div>
  );
}

// Child: UserProfile
function UserProfile({ name, age, city }) {
  return (
    <div className="profile">
      <h2>{name}👨‍💻</h2>
      <p>سن:{age}سال</p>
      <p>شهر:{city}📍</p>
    </div>
  );
}

ارسال داده بین کامپوننت‌های React props کار رو آسون می‌کنه: • destructuring: {name,age,city} کوتاه • هر object,array,function • child نمی‌تونه props رو تغییر بده(immutable) مثال props drilling :

JSX

// App → Header → UserMenu → Avatar
<Header user={currentUser} />

props در React چیست read-only data flow: • parent owner data • child فقط نمایش • one-way data flow

:Props Drilling vs Childrenبهترین روش پاس data بین component ها

props drilling vs childrenبهترین روش رو نشون می‌ده! ارسال داده بین کامپوننت‌های React دو روش :props drilling بد children prop خوب!⚛️ ۱ Props Drilling (مشکل‌ساز:

JSX

// بد: App → Header → Menu → Avatar همش user props
function App() {
  const user = { name:"علی" };
  return <Header user={user} />;
}

function Header({ user }) {
  return <Menu user={user} />; // drilling!
}

function Menu({ user }) {
  return <Avatar user={user} />; // drilling بیشتر!
}

۲ Children Prop (جادویی:

JSX

// خوب: content رو dynamic پاس کن
function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
}

function App() {
  return (
    <Card>
      <h2>عنوان</h2>
      <p>محتوا</p>
      <button>کلیک</button>
    </Card>
  );
}

بهترین روش‌ها:

JSX

// ترکیب طلایی
function Layout({ children, user }) {
  return (
    <div>
      <Header user={user} />
      <main>{children}</main>
    </div>
  );
}

Default Props و PropTypes :type safety و error handling حرفه‌ای

props undefined شد crash کردی؟ default Props و PropTypes pro developer می‌کنه! 😱 props در React آموزش کامل type safety و default value با PropTypes+defaultProps! crash ها رو قبل render kill کن.🛡️ :Default Props fallback value

JSX

function Button({ text = "کلیک کن", color = "blue" }) {
  return <button style={{backgroundColor:color}}>{text}</button>;
}

// یا با defaultProps (class style)
Button.defaultProps = {
  text:"کلیک کن",
  color:"blue"
};

نتیجه Button بدون crash کار می‌کنه! PropTypes type checking:

JSX

import PropTypes from 'prop-types';

function UserCard({ name, age, isPro }) {
  return (
    <div>
      <h3>{name} {isPro && "⭐"}</h3>
      <p>سن:{age}</p>
    </div>
  );
}

UserCard.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number,
  isPro: PropTypes.bool
};

UserCard.defaultProps = {
  age:18,
  isPro:false
};

نتیجه: console warning اگه string به age بدی!

props در React چیست؟ آموزش ارسال داده بین کامپوننت‌ها

Props چیست؟ ارسال داده parent به child بدون state

:Props Drilling vs Childrenبهترین روش پاس data بین component ها

Default Props و PropTypes :type safety و error handling حرفه‌ای

این مقاله به درد یکی از رفیقات می‌خوره؟

مقالات مرتبط با این موضوع

Component در React چیست؟ آموزش ساخت اولین کامپوننت

React چیست؟ چرا ری‌اکت محبوب‌ترین کتابخانه JavaScript برای فرانت‌اند است؟