Bagaimana untuk Membina Komponen Senarai Boleh Digunakan Semula dalam Reaksi dengan Fungsi Render Tersuai?

Linda Hamilton
Lepaskan: 2024-09-24 06:28:02
asal
317 orang telah melayarinya

How to Build Reusable List Components in React with Custom Render Functions?

Apabila bekerja dalam React, adalah perkara biasa untuk mempunyai komponen senarai yang menerima data dan peta pada setiap item untuk memaparkannya. Walau bagaimanapun, bahagian aplikasi anda yang berlainan mungkin memerlukan pemaparan yang berbeza untuk data yang sama. Penyelesaian terbaik untuk ini ialah menjadikan komponen senarai anda lebih fleksibel dengan menggunakan prop render untuk lulus fungsi rendering tersuai.

Mengapa Ini Perlu?

Bayangkan anda mempunyai senarai pengguna dalam aplikasi anda. Di sesetengah kawasan, anda mahu memaparkan hanya nama pengguna, dan di kawasan lain, anda perlu menunjukkan maklumat yang lebih terperinci seperti alamat e-mel atau gambar profil. Mencipta berbilang komponen senarai untuk setiap kes penggunaan boleh membawa kepada kod pendua dan menjadikan projek lebih sukar untuk diselenggara.

Apakah penyelesaiannya?

Penyelesaian yang mudah dan elegan ialah memastikan komponen senarai anda menerima fungsi renderItem. Fungsi ini mengambil item individu (dalam kes kami, pengguna) sebagai hujah dan mengembalikan nod React yang boleh dipaparkan dalam apa jua cara yang anda mahukan.

import React from 'react';

const List = ({ data, renderItem }) => {
  return (
    <ul>
      {data.map((item) => (
        <li key={item.id}>
          {renderItem(item)}
        </li>
      ))}
    </ul>
  );
};

export default List;

Salin selepas log masuk

Bagaimana untuk menggunakan komponen ini?

import List from './List';

const users = [
  { id: 1, name: 'John Doe', email: 'john@example.com' },
  { id: 2, name: 'Jane Smith', email: 'jane@example.com' }
];

const UserList = () => {
  return (
    <List
      data={users}
      renderItem={(user) => <span>{user.name}</span>}
    />
  );
};

// or 

const DetailedUserList = () => {
  return (
    <List
      data={users}
      renderItem={(user) => (
        <div>
          <strong>{user.name}</strong>
          <p>{user.email}</p>
        </div>
      )}
    />
  );
};


Salin selepas log masuk

Mengapa ini Corak Hebat?

Corak ini membolehkan fleksibiliti maksimum dengan pertindihan kod yang minimum. Daripada membuat komponen senarai yang berbeza untuk setiap kes penggunaan, anda mempunyai satu komponen senarai yang boleh mengendalikan sebarang keperluan pemaparan.

Jika anda telah bekerja dengan React Native, corak ini sepatutnya terasa biasa, kerana ia digunakan dalam komponen senarainya seperti FlatList. Ia merupakan penyelesaian yang terbukti dan boleh dipercayai untuk memaparkan senarai.

Dengan membenarkan komponen senarai anda menerima prop renderItem, anda boleh membuat komponen boleh guna semula dengan mudah yang menyesuaikan diri dengan bahagian aplikasi anda yang berbeza. Pendekatan ini memudahkan pangkalan kod anda, menjadikannya lebih mudah untuk diselenggara dan meningkatkan kebolehskalaan aplikasi anda.

Memandangkan anda telah mempelajari corak ini, cubalah dalam projek React anda dan anda akan melihat betapa hebat dan fleksibelnya corak ini! Selamat mengekod?

Atas ialah kandungan terperinci Bagaimana untuk Membina Komponen Senarai Boleh Digunakan Semula dalam Reaksi dengan Fungsi Render Tersuai?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!