Cara membuat komponen jadual tersuai dengan React dan Typescript (Bahagian 2)

pengenalan

Yay! ? Anda telah berjaya ke bahagian akhir siri dua bahagian ini! Jika anda belum melihat Bahagian 1, berhenti di sini dan lalui itu dahulu. Jangan risau, kami akan tunggu sehingga anda kembali! ?

Dalam Bahagian 1, kami membina komponen Jadual Tersuai. Anda boleh melihatnya beraksi di sini.

Dalam bahagian kedua ini, kami akan memperluaskan komponen untuk menambah beberapa ciri baharu. Inilah perkara yang akan kami usahakan:

Untuk menyokong ini, komponen Jadual Tersuai memerlukan beberapa peningkatan:

1. Keupayaan untuk memformat nilai yang diberikan—cth., memberikan nombor dengan pemformatan yang betul.
2. Fleksibiliti untuk membolehkan pengguna menyediakan templat tersuai untuk memaparkan baris, memberi mereka kawalan ke atas cara setiap lajur dipaparkan.

Mari kita mendalami membina ciri pertama.

Memanjangkan Antara Muka Lajur

Kami akan mulakan dengan menambahkan kaedah format pada antara muka Lajur untuk mengawal cara lajur tertentu memaparkan nilainya.

interface Column<T> {
  id: keyof T;
  label: string;
  format?: (value: string | number) => string;
}

Kaedah format pilihan ini akan digunakan untuk memformat data apabila perlu. Mari lihat cara ini berfungsi dengan contoh daripada fail Country.tsx. Kami akan menambahkan kaedah format pada lajur populasi.

const columns: Column<Country>[] = [
  { id: "name", label: "Name" },
  { id: "code", label: "ISO\u00a0Code" },
  {
    id: "population",
    label: "Population",
    format: (value) => new Intl.NumberFormat("en-US").format(value as number),
  },
  {
    id: "size",
    label: "Size\u00a0(km\u00b2)",
  },
  {
    id: "density",
    label: "Density",
  },
];

Di sini, kami menggunakan kaedah JavaScript Intl.NumberFormat untuk memformat populasi sebagai nombor. Anda boleh mengetahui lebih lanjut tentang kaedah ini di sini.

Seterusnya, kami perlu mengemas kini komponen Jadual Tersuai kami untuk menyemak fungsi format dan menggunakannya apabila ia wujud.

<TableBody>
  {rows.map((row, index) => (
    <TableRow hover tabIndex={-1} key={index}>
      {columns.map((column, index) => (
        <TableCell key={index}>
          {column.format
            ? column.format(row[column.id] as string)
            : (row[column.id] as string)}
        </TableCell>
      ))}
    </TableRow>
  ))}
</TableBody>

Dengan pengubahsuaian ini, lajur populasi kini dipaparkan dengan pemformatan yang sesuai. Anda boleh melihatnya beraksi di sini.

Menyokong Templat Tersuai

Sekarang, mari kita laksanakan ciri seterusnya: membenarkan templat tersuai untuk memaparkan lajur. Untuk melakukan ini, kami akan menambah sokongan untuk menghantar JSX sebagai prop kanak-kanak atau menggunakan prop render, memberikan pengguna kawalan penuh ke atas cara setiap sel dipaparkan.

Pertama, kami akan memanjangkan antara muka Props untuk menyertakan prop kanak-kanak pilihan.

interface Props<T> {
  rows: T[];
  columns: Column<T>[];
  children?: (row: T, column: Column<T>) => React.ReactNode;
}

Seterusnya, kami akan mengubah suai komponen Jadual Tersuai kami untuk menyokong prop baharu ini sambil mengekalkan tingkah laku sedia ada.

<TableRow>
  {columns.map((column, index) => (
    <TableCell key={index}>
      {children
        ? children(row, column)
        : column.format
        ? column.format(row[column.id] as string)
        : row[column.id]}
    </TableCell>
  ))}
</TableRow>

Ini memastikan bahawa jika prop kanak-kanak diluluskan, templat tersuai digunakan; jika tidak, kita kembali kepada tingkah laku lalai.

Mari kita juga memfaktorkan semula kod untuk menjadikannya lebih boleh digunakan semula:

const getFormattedValue = (column, row) => {
  const value = row[column.id];
  return column.format ? column.format(value) : value as string;
};

const getRowTemplate = (row, column, children) => {
  return children ? children(row, column) : getFormattedValue(column, row);
};

Komponen Baris Tersuai

Sekarang mari kita bina komponen baris tersuai dalam fail Countries.tsx. Kami akan membuat komponen CustomRow untuk mengendalikan logik pemaparan khas.

interface RowProps {
  row: Country;
  column: Column<Country>;
}

const CustomRow = ({ row, column }: RowProps) => {
  const value = row[column.id];
  if (column.format) {
    return <span>{column.format(value as string)}</span>;
  }
  return <span>{value}</span>;
};

Kemudian, kami akan mengemas kini Countries.tsx untuk menghantar komponen CustomRow ini kepada CustomTable.

const Countries = () => (
  <CustomTable columns={columns} rows={rows}>
    {(row, column) => <CustomRow column={column} row={row} />}
  </CustomTable>
);

Untuk People.tsx, yang tidak memerlukan sebarang templat khas, kami hanya boleh memaparkan jadual tanpa prop kanak-kanak.

const People = () => <CustomTable columns={columns} rows={rows} />;

Penambahbaikan

Satu peningkatan yang boleh kami lakukan ialah penggunaan indeks tatasusunan sebagai kunci, yang boleh menyebabkan masalah. Sebaliknya, mari kita kuatkuasakan penggunaan rowKey unik untuk setiap baris.

Kami akan memanjangkan antara muka Props untuk memerlukan rowKey.

interface Props<T> {
  rowKey: keyof T;
  rows: T[];
  columns: Column<T>[];
  children?: (row: T, column: Column<T>) => React.JSX.Element | string;
  onRowClick?: (row: T) => void;
}

Kini, setiap pengguna CustomTable mesti menyediakan rowKey untuk memastikan pemaparan yang stabil.

<CustomTable
  rowKey="code"
  rows={rows}
  onRowClick={handleRowClick}
  columns={columns}
>
  {(row, column) => <CustomRow column={column} row={row} />}
</CustomTable>

Kod Akhir

Lihat kod penuh di sini.

Kesimpulan

Dalam artikel ini, kami memperluaskan komponen Jadual Tersuai kami dengan menambahkan pilihan pemformatan dan keupayaan untuk menghantar templat tersuai untuk lajur. Ciri ini memberi kami kawalan yang lebih besar ke atas cara data dipaparkan dalam jadual, sambil turut menjadikan komponen itu fleksibel dan boleh digunakan semula untuk kes penggunaan yang berbeza.

Kami juga menambah baik komponen dengan menguatkuasakan prop rowKey untuk mengelak daripada menggunakan indeks tatasusunan sebagai kunci, memastikan pemaparan yang lebih cekap dan stabil.

Saya harap anda mendapati panduan ini membantu! Jangan ragu untuk berkongsi pendapat anda di bahagian komen.

Terima kasih kerana tetap bersama saya melalui perjalanan ini! ?

Atas ialah kandungan terperinci Cara membuat komponen jadual tersuai dengan React dan Typescript (Bahagian 2). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!