Corak Reka Bentuk Komponen Komponen React dengan Contoh

Sebagai pembangun, kami sentiasa mencari cara untuk meningkatkan kebolehselenggaraan, kebolehskalaan dan kebolehgunaan semula aplikasi kami. Corak Komponen Komposisi ialah salah satu corak paling berkesan yang membolehkan kami memecahkan UI yang besar dan kompleks kepada komponen yang kecil dan fokus yang boleh digabungkan dengan mudah untuk mencipta reka letak yang lebih dinamik.

Artikel ini akan membimbing anda melalui corak Komponen Komposit dalam React, termasuk kes penggunaan praktikal, contoh mendalam dan amalan terbaik untuk diikuti untuk memaksimumkan keberkesanannya.

Apakah Corak Komponen Komposit?

Ringkasnya, corak Komponen Komposit adalah mengenai membina komponen kecil dan fokus dan kemudian menggabungkannya menjadi komponen yang lebih besar dan lebih kompleks. Daripada membina komponen besar yang cuba melakukan semuanya, pecahkannya kepada bahagian yang lebih mudah untuk diurus dan digunakan semula.

Fikirkan ia seperti membina kereta. Daripada mereka bentuk keseluruhan kereta sebagai satu unit, bahagian seperti roda, enjin, tempat duduk, dsb. dibuat dan kemudian dipasang menjadi sebuah kereta yang lengkap. Ini memberi anda fleksibiliti untuk menggantikan bahagian, menaik taraf bahagian atau menggunakan semula bahagian dalam kereta yang berbeza.

Dengan mengikuti corak ini, anda akan mendapat asas kod yang lebih modular dan boleh diurus.

Mengapa ia berguna dalam React?

1. Kebolehgunaan semula: Dalam aplikasi besar, komponen boleh guna semula adalah penyelamat nyawa. Komponen seperti butang, medan input, modal, dsb. boleh digunakan di bahagian aplikasi yang berbeza, menjimatkan masa dan mengurangkan pertindihan kod.

2. Kebolehselenggaraan: Komponen kecil lebih mudah diurus. Jika terdapat ralat dalam satu bahagian UI, anda boleh menemuinya dengan lebih pantas tanpa perlu menapis ratusan baris kod.

3. Skalabiliti: Apabila aplikasi berkembang, adalah lebih mudah untuk menggabungkan komponen untuk menambah fungsi baharu daripada mengubah suai komponen yang sudah besar dan kompleks.

Senario sebenar dan kes penggunaan

Untuk benar-benar memahami kuasa corak Komponen Komposit, mari lihat cara membina halaman blog menggunakan corak Komponen Komposit, Next.js, TypeScript dan Tailwind CSS. Kami akan mempelajari cara untuk memecahkan UI blog anda kepada bahagian yang lebih kecil dan cara menggabungkan bahagian ini untuk mencipta halaman blog yang dinamik dan fleksibel.

Langkah 1: Sediakan Komponen

Halaman blog kami akan terdiri daripada komponen berikut:

1. Pengepala — Bar navigasi di bahagian atas halaman.

2. Kad Pos — Kad yang memaparkan tajuk, ringkasan dan pautan "Baca Lagi" untuk satu catatan blog.

3. Penomboran — Kawalan untuk menyemak imbas catatan blog berbilang halaman.

4. Halaman Blog — Komponen utama yang menyatukan segala-galanya.

Mari mulakan dengan menyediakan komponen.

1. Komponen pengepala

Komponen ini akan menghasilkan bar navigasi ringkas.

import React from 'react';
import Link from 'next/link';

const Header: React.FC = () => {
  return (
    <nav className="max-w-4xl mx-auto flex justify-between text-white">
      <Link className="text-2xl font-bold" href="/">My Blog</Link>
      <div>
        <Link className="px-4" href="/">Home</Link>
        <Link className="px-4" href="/about">About</Link>
        <Link className="px-4" href="/contact">Contact</Link>
      </div>
    </nav>
  );
};

export default Header;

Komponen

<眉> Broken adalah mudah: Ia menunjukkan bar navigasi dengan pautan ke halaman yang berbeza dari laman web.

<.> 2. Komponen kad artikel

Komponen ini akan memaparkan tajuk, abstrak, dan

"Baca lebih lanjut"

pautan pos blog tunggal.

setiap <章> kad artikel

import React from 'react';
import Link from 'next/link';

interface PostCardProps {
  title: string;
  excerpt: string;
  id: string;
}

const PostCard: React.FC<PostCardProps> = ({ title, excerpt, id }) => {
  return (
    <div className="bg-white p-6 rounded-lg shadow-md mb-6">
      <h2 className="text-2xl font-bold mb-2">{title}</h2>
      <p className="text-gray-700 mb-4">{excerpt}</p>
      <Link className="text-blue-500 hover:text-blue-700" href={`/post/${id}`}>Read More</Link>
    </div>
  );
};

export default PostCard;

akan menerima tiga atribut: tajuk, abstrak dan ID. Pautan "Reading More" akan mengalihkan pengguna ke halaman berasingan, di mana mereka dapat membaca artikel lengkap.

<.> 3. Pagling Component

Pemprosesan komponen ini digunakan untuk melayari kawalan paging pelbagai artikel blog.

<页> Praktikal

Paparan Komponen

Butang Previous

import React from 'react';
import Link from 'next/link';

interface PaginationProps {
  currentPage: number;
  totalPages: number;
}

const Pagination: React.FC<PaginationProps> = ({ currentPage, totalPages }) => {
  return (
    <div className="flex justify-center mt-8">
      {currentPage > 1 && (
        <Link className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600" href={`/?page=${currentPage - 1}`}>Previous</Link>
      )}
      {currentPage} / {totalPages}
      {currentPage < totalPages && (
        <Link className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600" href={`/?page=${currentPage + 1}`}>Next</Link>
      )}
    </div>
  );
};

export default Pagination;

dan

Seterusnya , dan paparkan nombor halaman semasa dan nombor halaman keseluruhan. (Langkah 2 dan kandungan berikutnya adalah serupa dengan output sebelumnya, tetapi ia telah membuat pelarasan halus kepada bahasa dan ekspresi untuk mengelakkan output berulang dari kandungan yang sama.) kepada keperluan anda. dan pastikan integriti dan ketepatan contoh kod. Saya telah menyediakan blok kod yang lebih jelas dan penerangan bahasa yang lebih mudah.

Atas ialah kandungan terperinci Corak Reka Bentuk Komponen Komponen React dengan Contoh. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!