So erstellen Sie eine benutzerdefinierte Tabellenkomponente mit React und Typescript (Teil 2)

Einführung

Juhuu! ? Sie haben es zum letzten Teil dieser zweiteiligen Serie geschafft! Wenn Sie Teil 1 noch nicht gelesen haben, hören Sie hier auf und gehen Sie diesen zuerst durch. Keine Sorge, wir warten, bis Sie zurück sind! ?

In Teil 1 haben wir die CustomTable-Komponente erstellt. Sie können es hier in Aktion sehen.

In diesem zweiten Teil erweitern wir die Komponente um einige neue Funktionen. Hier ist, worauf wir hinarbeiten werden:

Um dies zu unterstützen, benötigt die CustomTable-Komponente einige Verbesserungen:

1. Die Möglichkeit, den gerenderten Wert zu formatieren – z. B. das Rendern einer Zahl mit der richtigen Formatierung.
2. Flexibilität, die es Benutzern ermöglicht, benutzerdefinierte Vorlagen zum Rendern von Zeilen bereitzustellen, sodass sie steuern können, wie jede Spalte angezeigt wird.

Lassen Sie uns mit der Erstellung der ersten Funktion beginnen.

Erweitern der Spaltenschnittstelle

Wir beginnen mit dem Hinzufügen einer Formatmethode zur Spaltenschnittstelle, um zu steuern, wie bestimmte Spalten ihre Werte rendern.

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

Diese optionale Formatierungsmethode wird bei Bedarf zum Formatieren von Daten verwendet. Sehen wir uns anhand eines Beispiels aus der Datei Country.tsx an, wie das funktioniert. Wir werden der Bevölkerungsspalte eine Formatierungsmethode hinzufügen.

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",
  },
];

Hier verwenden wir die JavaScript-Methode Intl.NumberFormat, um die Grundgesamtheit als Zahl zu formatieren. Mehr über diese Methode erfahren Sie hier.

Als nächstes müssen wir unsere CustomTable-Komponente aktualisieren, um nach der Formatfunktion zu suchen und sie anzuwenden, wenn sie vorhanden ist.

<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>

Mit dieser Änderung wird die Bevölkerungsspalte jetzt mit der entsprechenden Formatierung gerendert. Sie können es hier in Aktion sehen.

Unterstützung benutzerdefinierter Vorlagen

Jetzt implementieren wir die nächste Funktion: Ermöglichen benutzerdefinierter Vorlagen zum Rendern von Spalten. Zu diesem Zweck fügen wir Unterstützung für die Übergabe von JSX als untergeordnete Requisite oder die Verwendung von Render-Requisiten hinzu, sodass Verbraucher die volle Kontrolle darüber haben, wie jede Zelle gerendert wird.

Zuerst erweitern wir die Requisiten-Schnittstelle um eine optionale Kinder-Requisite.

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

Als nächstes ändern wir unsere CustomTable-Komponente, um diese neue Requisite zu unterstützen und gleichzeitig das vorhandene Verhalten beizubehalten.

<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>

Dadurch wird sichergestellt, dass bei Übergabe der untergeordneten Requisite die benutzerdefinierte Vorlage verwendet wird. andernfalls greifen wir auf das Standardverhalten zurück.

Lassen Sie uns auch den Code umgestalten, um ihn wiederverwendbar zu machen:

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

Benutzerdefinierte Zeilenkomponente

Jetzt erstellen wir eine benutzerdefinierte Zeilenkomponente in der Countries.tsx-Datei. Wir erstellen eine CustomRow-Komponente, um spezielle Rendering-Logik zu verarbeiten.

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

Dann aktualisieren wir Countries.tsx, um diese CustomRow-Komponente an CustomTable zu übergeben.

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

Für People.tsx, das keine speziellen Vorlagen benötigt, können wir die Tabelle einfach ohne die Kinder-Requisite rendern.

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

Verbesserungen

Eine Verbesserung, die wir vornehmen können, ist die Verwendung von Array-Indizes als Schlüssel, was zu Problemen führen kann. Erzwingen wir stattdessen die Verwendung eines eindeutigen Zeilenschlüssels für jede Zeile.

Wir erweitern die Props-Schnittstelle so, dass ein rowKey erforderlich ist.

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

Jetzt muss jeder Verbraucher von CustomTable einen rowKey bereitstellen, um ein stabiles Rendering zu gewährleisten.

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

Endgültiger Code

Den vollständigen Code finden Sie hier.

Abschluss

In diesem Artikel haben wir unsere benutzerdefinierte CustomTable-Komponente um Formatierungsoptionen und die Möglichkeit erweitert, benutzerdefinierte Vorlagen für Spalten zu übergeben. Diese Funktionen geben uns eine bessere Kontrolle darüber, wie Daten in Tabellen gerendert werden, und machen die Komponente gleichzeitig flexibel und für verschiedene Anwendungsfälle wiederverwendbar.

Wir haben die Komponente außerdem verbessert, indem wir eine rowKey-Requisite erzwungen haben, um die Verwendung von Array-Indizes als Schlüssel zu vermeiden und so ein effizienteres und stabileres Rendering zu gewährleisten.

Ich hoffe, Sie fanden diesen Leitfaden hilfreich! Teilen Sie Ihre Gedanken gerne im Kommentarbereich mit.

Danke, dass du mich auf dieser Reise begleitet hast! ?

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine benutzerdefinierte Tabellenkomponente mit React und Typescript (Teil 2). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!