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

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;

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>
      )}
    />
  );
};

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!