React / Нөхцөлт рендер

Нөхцөлт рендер

Бодит апп дахь UI хэзээд нэг янз байдаггүй — нэвтэрсэн хэрэглэгчид нэг зүйл, зочинд өөр зүйл харагдана; өгөгдөл ачаалж байхад spinner, дууссан хойно жагсаалт гарна. Энэ бол нөхцөлт рендер буюу conditional rendering юм. React-д үүнийг хэрэгжүүлэх хэд хэдэн арга бий — тус бүрийг хэзээ ашиглахаа энэ хичээлд ойлгоно.

if / else ашиглах

Хамгийн уншихад хялбар арга бол энгийн if шалгалт юм. Component-н дотор, JSX-н өмнө бичнэ:

jsx

function WelcomeMessage({ isLoggedIn }) {
  if (isLoggedIn) {
    return (
      <div>
        <h2>Тавтай морил!</h2>
        <p>Та нэвтэрсэн байна.</p>
      </div>
    );
  }

  return (
    <div>
      <h2>Зочин</h2>
      <p>Үргэлжлүүлэхийн тулд нэвтэрнэ үү.</p>
    </div>
  );
}

Нөхцөл нь энгийн, гарах утгууд нь ялгаатай бол if хэлбэр хамгийн тодорхой байдаг.

Тернар оператор ( ? : )

JSX дотор шууд нөхцөлт рендер хийхэд тернар оператор ашиглана. { нөхцөл ? үнэн : худал } хэлбэртэй:

jsx

import { useState } from "react";

function TogglePanel() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>
        {isOpen ? "Хаах ▲" : "Нээх ▼"}
      </button>

      {isOpen ? (
        <div className="panel">
          <p>Нуугдаж байсан агуулга гарлаа!</p>
        </div>
      ) : (
        <p>Товчийг дарж нээнэ үү.</p>
      )}
    </div>
  );
}

Тернар оператор нь JSX дотор ажилладаг тул хаана ч байрлуулж болно. Гэхдээ хэт гүн үүрлүүлбэл уншиход хэцүү болдог — тэр тохиолдолд if буцна.

&& оператор — нэг талт нөхцөл

Нөхцөл үнэн бол харуулах, худал бол юу ч харуулахгүй тохиолдолд && оператор хамгийн товч бичлэг юм:

jsx

function Notifications({ count, isPro }) {
  return (
    <div>
      {/* count > 0 бол л харуулна */}
      {count > 0 && <span className="badge">{count} мэдэгдэл</span>}

      {/* isPro үнэн бол л харуулна */}
      {isPro && <span className="pro-badge">Pro</span>}

      <p>Профайл</p>
    </div>
  );
}

Анхааруулга: count && <span>{count}</span> бичихэд count нь 0 бол React 0 гэсэн тоог дэлгэцэнд харуулдаг. Үүнээс зайлсхийхийн тулд count > 0 && эсвэл !!count && хэлбэр ашиглана.

Loading болон Error төлөв

Өгөгдөл татах үед гурван төлөв байдаг — loading, error, амжилт. Нөхцөлт рендер ашиглан бүгдийг боловсруулна:

jsx

function UserProfile({ user, isLoading, error }) {
  if (isLoading) {
    return <p>Ачааллаж байна...</p>;
  }

  if (error) {
    return (
      <div className="error">
        <p>Алдаа гарлаа: {error}</p>
        <button onClick={() => window.location.reload()}>Дахин оролдох</button>
      </div>
    );
  }

  if (!user) {
    return <p>Хэрэглэгч олдсонгүй.</p>;
  }

  return (
    <div className="profile">
      <h2>{user.username}</h2>
      <p>{user.xp} XP</p>
    </div>
  );
}

"Early return" хэлбэрээр тусгай тохиолдлуудыг эхэлж шийдэж, гол рендер-г сүүлд бичих нь кодыг цэвэр байлгадаг.

Хувьсагч ашиглах

JSX дотор нөхцөл нь нарийн бол элементийг хувьсагчид хадгалаад ашиглах нь уншихад тохиромжтой:

jsx

function StatusBadge({ status }) {
  let badge;

  if (status === "online") {
    badge = <span style={{ color: "#4ade80" }}>● Онлайн</span>;
  } else if (status === "away") {
    badge = <span style={{ color: "#fbbf24" }}>● Холдсон</span>;
  } else {
    badge = <span style={{ color: "#94a3b8" }}>● Оффлайн</span>;
  }

  return (
    <div>
      <p>Төлөв: {badge}</p>
    </div>
  );
}

jsx

// Ашиглах жишээ
function App() {
  return (
    <div>
      <StatusBadge status="online" />
      <StatusBadge status="away" />
      <StatusBadge status="offline" />
    </div>
  );
}

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

Массив өгөгдлөөс жагсаалт рендер хийх аргыг судална. React-д яагаад key props заавал шаардлагатай, map ашиглан жагсаалт үүсгэх ёстой зарчмуудыг ойлгоно.

← Өмнөх хичээлҮйл явдал (Events)Дараах хичээл →Жагсаалт ба key