如何使用 React 和 Typescript 创建自定义表格组件（第 2 部分）

介绍

耶！ ？您已经完成了这个由两部分组成的系列的最后一部分！如果您还没有查看第 1 部分，请先在此停下来并完成第 1 部分。别担心，我们会等你回来！ ？

在第 1 部分中，我们构建了 CustomTable 组件。您可以在这里看到它的实际效果。

在第二部分中，我们将扩展该组件以添加一些新功能。以下是我们将努力的目标：

为了支持这一点，CustomTable 组件将需要一些增强功能：

1. 格式化渲染值的能力——例如，以正确的格式渲染数字。
2. 允许用户灵活地提供用于呈现行的自定义模板，使他们能够控制每列的​​显示方式。

让我们深入构建第一个功能。

扩展列接口

我们将首先向 Column 接口添加一个格式方法来控制特定列如何呈现其值。

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

此可选格式方法将在必要时用于格式化数据。让我们通过 Country.tsx 文件中的示例来看看它是如何工作的。我们将向人口列添加格式方法。

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

在这里，我们使用 JavaScript Intl.NumberFormat 方法将人口格式设置为数字。您可以在这里了解有关此方法的更多信息。

接下来，我们需要更新 CustomTable 组件以检查格式函数并在存在时应用它。

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

通过此修改，人口列现在以适当的格式呈现。您可以在这里看到它的实际效果。

支持自定义模板

现在，让我们实现下一个功能：允许自定义模板来呈现列。为此，我们将添加对将 JSX 作为子属性传递或使用渲染属性的支持，让消费者完全控制每个单元格的渲染方式。

首先，我们将扩展 Props 接口以包含可选的子属性。

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

接下来，我们将修改 CustomTable 组件以支持这个新道具，同时保留现有行为。

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

这确保了如果传递了children 属性，则使用自定义模板；否则，我们会回到默认行为。

让我们也重构代码以使其更可重用：

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

自定义行组件

现在让我们在 Country.tsx 文件中构建一个自定义行组件。我们将创建一个 CustomRow 组件来处理特殊的渲染逻辑。

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

然后，我们将更新 Country.tsx 以将此 CustomRow 组件传递给 CustomTable。

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

对于 People.tsx，它不需要任何特殊的模板，我们可以简单地渲染表格，而不需要 Children 属性。

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

改进

我们可以做出的一项改进是使用数组索引作为键，这可能会导致问题。相反，让我们强制每行使用唯一的 rowKey。

我们将扩展 Props 接口以需要 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;
}

现在CustomTable的每个消费者都必须提供rowKey来保证稳定渲染。

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

最终代码

在此处查看完整代码。

结论

在本文中，我们通过添加格式选项和传递列的自定义模板的功能来扩展自定义 CustomTable 组件。这些功能使我们能够更好地控制数据在表中的呈现方式，同时也使组件灵活且可重用于不同的用例。

我们还通过强制执行 rowKey 属性来改进组件，以避免使用数组索引作为键，从而确保更高效和稳定的渲染。

我希望本指南对您有所帮助！欢迎在评论区分享你的想法。

感谢您一路陪伴我！ ？

以上是如何使用 React 和 Typescript 创建自定义表格组件（第 2 部分）的详细内容。更多信息请关注PHP中文网其他相关文章！