Rendering Bersyarat dalam React: Elemen UI Rendering Secara Dinamik

Rendering Bersyarat dalam React: UI Rendering Berdasarkan Syarat

Paparan bersyarat dalam React merujuk kepada teknik pemaparan elemen UI yang berbeza berdasarkan syarat atau keadaan tertentu. React menyediakan beberapa cara untuk membuat komponen atau elemen secara bersyarat bergantung pada keadaan aplikasi atau prop.

1. Apakah Rendering Bersyarat?

Penyampaian bersyarat ialah konsep di mana komponen atau elemen yang berbeza dipaparkan berdasarkan syarat tertentu. Dalam React, ini biasanya dicapai dengan menggunakan pengendali JavaScript seperti if, ternary, atau && dalam JSX untuk memutuskan perkara yang perlu dipaparkan.

Mengapa Gunakan Rendering Bersyarat?

• Untuk memaparkan elemen UI yang berbeza berdasarkan interaksi pengguna atau perubahan keadaan.
• Untuk mengendalikan kes tepi seperti menunjukkan keadaan pemuatan, mesej ralat atau keadaan kosong.
• Untuk menogol antara reka letak atau komponen yang berbeza secara dinamik.

2. Teknik Asas Rendering Bersyarat

a. Menggunakan Pernyataan if/else

Pendekatan tradisional menggunakan pernyataan if or else boleh digunakan sebelum memulangkan JSX. Ini amat berguna apabila berbilang syarat perlu disemak.

import React, { useState } from "react";

const MyComponent = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  } else {
    return <button onClick={() => setIsLoggedIn(true)}>Login</button>;
  }
};

b. Menggunakan Operator Ternary

Pengendali ternary ialah cara ringkas untuk melaksanakan pemaparan bersyarat. Ia berguna apabila anda ingin memaparkan satu elemen jika syarat adalah benar dan elemen lain jika ia palsu.

import React, { useState } from "react";

const MyComponent = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <>
      {isLoggedIn ? (
        <h1>Welcome back!</h1>
      ) : (
        <button onClick={() => setIsLoggedIn(true)}>Login</button>
      )}
    </>
  );
};

c. Menggunakan Logical && Operator

Operator && ialah pengendali litar pintas yang menghasilkan elemen jika keadaan itu benar. Pendekatan ini berguna apabila anda hanya perlu membuat sesuatu secara bersyarat tanpa cawangan lain.

import React, { useState } from "react";

const MyComponent = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <>
      {isLoggedIn && <h1>Welcome back!</h1>}
      {!isLoggedIn && <button onClick={() => setIsLoggedIn(true)}>Login</button>}
    </>
  );
};

3. Rendering Bersyarat dengan Fungsi

Anda juga boleh menggunakan fungsi untuk mengendalikan pemaparan bersyarat dengan lebih jelas, terutamanya apabila terdapat berbilang syarat untuk diperiksa.

import React, { useState } from "react";

const MyComponent = () => {
  const [status, setStatus] = useState("loading");

  const renderContent = () => {
    if (status === "loading") {
      return <p>Loading...</p>;
    } else if (status === "error") {
      return <p>Error occurred!</p>;
    } else {
      return <p>Data loaded successfully!</p>;
    }
  };

  return (
    <div>
      {renderContent()}
      <button onClick={() => setStatus("error")}>Simulate Error</button>
      <button onClick={() => setStatus("success")}>Simulate Success</button>
    </div>
  );
};

4. Paparan Bersyarat dengan Komponen React

Kadangkala, anda mungkin mahu memaparkan keseluruhan komponen berdasarkan syarat tertentu.

import React, { useState } from "react";

const Welcome = () => <h1>Welcome back!</h1>;
const Login = () => <button>Login</button>;

const MyComponent = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return isLoggedIn ? <Welcome /> : <Login />;
};

5. Rendering Bersyarat Berdasarkan Pemetaan Tatasusunan

Jika anda memaparkan senarai item, pemaparan bersyarat boleh digunakan untuk secara terpilih memaparkan elemen tertentu dalam senarai.

import React, { useState } from "react";

const MyComponent = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  } else {
    return <button onClick={() => setIsLoggedIn(true)}>Login</button>;
  }
};

6. Rendering Bersyarat dengan useEffect untuk Panggilan API

Dalam kebanyakan kes, anda akan memaparkan elemen secara bersyarat berdasarkan hasil panggilan API atau pengambilan data tak segerak. Ini boleh dilakukan menggunakan keadaan dan kesan sampingan dengan useEffect.

import React, { useState } from "react";

const MyComponent = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <>
      {isLoggedIn ? (
        <h1>Welcome back!</h1>
      ) : (
        <button onClick={() => setIsLoggedIn(true)}>Login</button>
      )}
    </>
  );
};

7. Amalan Terbaik untuk Paparan Bersyarat

• Pastikan Mudah: Elakkan keadaan bersarang dalam yang menjadikan JSX sukar dibaca dan diselenggara.
• Gunakan Fungsi Pembantu: Jika anda mempunyai berbilang syarat, selalunya lebih bersih untuk menggunakan fungsi pembantu untuk memaparkan bahagian UI yang berbeza.
• Pertimbangkan Keadaan dan Props: Paparan bersyarat selalunya bergantung pada keadaan komponen atau prop. Pastikan anda mengendalikan kes tepi seperti keadaan pemuatan, data kosong dan ralat.

8. Kesimpulan

Perenderan bersyarat ialah konsep asas dalam React yang membolehkan anda memaparkan elemen UI yang berbeza berdasarkan keadaan atau prop. Dengan menggunakan teknik seperti if, operator ternary, && operator, atau juga fungsi, anda boleh melaraskan secara dinamik perkara yang dihasilkan oleh komponen anda. Paparan bersyarat yang betul membantu meningkatkan pengalaman pengguna dengan memaparkan kandungan yang sesuai berdasarkan keadaan apl atau interaksi pengguna.

Atas ialah kandungan terperinci Rendering Bersyarat dalam React: Elemen UI Rendering Secara Dinamik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!