React / Props — өгөгдөл дамжуулах

Props — өгөгдөл дамжуулах

Өмнөх хичээлд <UserCard /> component-г хэд хэд ашиглав — гэхдээ бүгд яг адил агуулгатай байлаа. Бодит аппликейшнд карт бүр өөр өөр нэр, зураг, мэдээлэлтэй байх ёстой. Үүнийг шийддэг арга бол props юм. Props бол эцэг component-с хүүхэд component руу дамжуулдаг өгөгдөл юм.

Props хэрхэн ажилладаг вэ?

Props нь HTML attribute-тэй адилхан синтакс ашигладаг. Зүүн талд нэр, баруун талд утга:

jsx
// App.jsx — props дамжуулж байна
function App() {
  return (
    <div>
      <Greeting name="Болд" />
      <Greeting name="Сарнай" />
      <Greeting name="Тэмүүлэн" />
    </div>
  );
}
jsx
// Greeting.jsx — props хүлээн авч байна
function Greeting(props) {
  return <h2>Сайн уу, {props.name}!</h2>;
}

props бол объект юм. props.name гэж бичснээр дамжуулсан name утгыг авна. Гурван <Greeting /> тус бүр өөрийн нэрийг харуулна.

Destructuring ашиглах

Практикт props.name гэж давтан бичихийн оронд destructuring ашиглах нь илүү цэвэр:

jsx
// Урт хэлбэр
function UserCard(props) {
  return (
    <div>
      <h3>{props.username}</h3>
      <p>{props.bio}</p>
      <span>{props.xp} XP</span>
    </div>
  );
}

// Destructuring ашигласан — илүү тодорхой
function UserCard({ username, bio, xp }) {
  return (
    <div>
      <h3>{username}</h3>
      <p>{bio}</p>
      <span>{xp} XP</span>
    </div>
  );
}

Параметрт { } хаалт бичснээр props объектоос шаардлагатай утгуудыг шууд задлан авна.

Default Props утга

Props дамжуулаагүй тохиолдолд ашиглах default утга тохируулж болно:

jsx
function Badge({ label = "Оролцогч", color = "gray" }) {
  return <span style={{ backgroundColor: color }}>{label}</span>;
}

function App() {
  return (
    <div>
      {/* label ба color хоёулаа дамжуулна */}
      <Badge label="Pro" color="#a78bfa" />

      {/* зөвхөн label дамжуулна — color нь "gray" болно */}
      <Badge label="Шинэ" />

      {/* юу ч дамжуулахгүй — бүгд default утга авна */}
      <Badge />
    </div>
  );
}

Default утга тохируулах нь component-г уян хатан болгож, алдааас сэргийлдэг.

Төрөл бүрийн Props

Props-д зөвхөн string биш ямар ч JavaScript утга дамжуулж болно:

jsx
function CourseCard({ title, lessonCount, isFree, color, onEnroll }) {
  return (
    <div style={{ borderColor: color }}>
      <h3>{title}</h3>
      <p>{lessonCount} хичээл</p>
      {isFree && <span>Үнэгүй</span>}
      <button onClick={onEnroll}>Элсэх</button>
    </div>
  );
}

function App() {
  function handleEnroll() {
    console.log("Элссэн!");
  }

  return (
    <CourseCard
      title="React үндэс" // string
      lessonCount={45} // number — { } хаалттай
      isFree={true} // boolean — { } хаалттай
      color="#60a5fa" // string
      onEnroll={handleEnroll} // функц — { } хаалттай
    />
  );
}

String-г " " хашилтаар, бусад бүх утгыг { } хаалтаар дамжуулна.

Children Prop

Component тэгийн дунд агуулга байрлуулахад children props ашигладаг:

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

function App() {
  return (
    <Card>
      <h2>Миний карт</h2>
      <p>Дурын агуулга энд орно.</p>
      <button>Дарах</button>
    </Card>
  );
}

children бол тусгай нэртэй props юм — компонентийн нээх ба хаах тэгийн хооронд бичсэн бүх зүйл children-д очдог. Layout component, modal, card зэрэгт маш их ашиглагддаг.

Props бол read-only

Чухал дүрэм: props-ийг component дотор өөрчлөх боломжгүй. Props нь эцгээс хүүхэд рүү нэг чиглэлтэй урсдаг:

jsx
function Wrong({ count }) {
  // ❌ Буруу — props-г шууд өөрчлөх хориотой
  count = count + 1;
  return <p>{count}</p>;
}

function Right({ count }) {
  // ✅ Зөв — props-г зөвхөн уншина
  const doubled = count * 2;
  return <p>{doubled}</p>;
}

Өгөгдлийг өөрчлөх шаардлагатай бол useState hook ашиглана — дараагийн хичээлд үүнийг судална.

Дараагийн хичээлд:

useState hook ашиглан component дотор өгөгдөл хадгалж, өөрчлөх аргыг судална. Товч дарахад тоолуур нэмэгдэх, форм бөглөх зэрэг жишээгээр дадлага хийнэ.

← Өмнөх хичээлComponent үндэсДараах хичээл →useState hook