導入

わーい！ ?この 2 部構成のシリーズの最終部分に到達しました。まだパート 1 をチェックしていない場合は、ここで止めて、最初にパート 1 を読んでください。心配しないでください。戻ってくるまで待っています。 ?

パート 1 では、CustomTable コンポーネントを構築しました。ここで実際の動作を見ることができます。

この 2 番目のパートでは、コンポーネントを拡張していくつかの新機能を追加します。私たちが取り組んでいくことは次のとおりです:

これをサポートするには、CustomTable コンポーネントにいくつかの機能拡張が必要です:

1. 表示される値をフォーマットする機能。たとえば、適切なフォーマットで数値を表示します。
2. ユーザーが行をレンダリングするためのカスタム テンプレートを提供できる柔軟性により、各列の表示方法を制御できるようになります。

最初の機能の構築に移りましょう。

列インターフェイスの拡張

まず、Column インターフェイスにフォーマット メソッドを追加して、特定の列の値をレンダリングする方法を制御します。

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

このオプションのフォーマット方法は、必要に応じてデータをフォーマットするために使用されます。 Country.tsx ファイルの例でこれがどのように機能するかを見てみましょう。人口列にフォーマット メソッドを追加します。

const columns: Column[] = [
  { 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 コンポーネントを更新して、フォーマット関数を確認し、存在する場合はそれを適用する必要があります。

  {rows.map((row, index) => (
    
      {columns.map((column, index) => (
        
          {column.format
            ? column.format(row[column.id] as string)
            : (row[column.id] as string)}
        
      ))}
    
  ))}

この変更により、人口列が適切な書式設定で表示されるようになりました。ここで実際の動作を見ることができます。

カスタムテンプレートのサポート

さて、次の機能を実装しましょう。列をレンダリングするためのカスタム テンプレートを許可します。これを行うために、JSX を子プロップとして渡すか、レンダー プロップを使用するためのサポートを追加し、コンシューマーが各セルのレンダリング方法を完全に制御できるようにします。

まず、Props インターフェイスを拡張して、オプションの子プロパティを含めます。

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

次に、既存の動作を維持しながら、この新しいプロパティをサポートするように CustomTable コンポーネントを変更します。

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

これにより、子プロパティが渡された場合にカスタム テンプレートが使用されることが保証されます。それ以外の場合は、デフォルトの動作に戻ります。

コードをリファクタリングして再利用しやすくしましょう:

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

カスタム行コンポーネント

次に、Countries.tsx ファイルにカスタム行コンポーネントを構築しましょう。特別なレンダリング ロジックを処理する CustomRow コンポーネントを作成します。

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

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

次に、Countries.tsx を更新して、この CustomRow コンポーネントを CustomTable に渡します。

const Countries = () => (
  
    {(row, column) => }
  
);

People.tsx の場合、特別なテンプレートは必要ありません。子プロップなしでテーブルを単純にレンダリングできます。

const People = () => ;

改善点

私たちができる改善の 1 つは、配列インデックスをキーとして使用することですが、これは問題を引き起こす可能性があります。代わりに、各行に一意の rowKey の使用を強制しましょう。

rowKey を必要とするように Props インターフェイスを拡張します。

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

CustomTable の各コンシューマは、安定したレンダリングを保証するために rowKey を提供する必要があります。

  {(row, column) => }

最終コード

完全なコードはここで確認してください。

結論

この記事では、書式設定オプションと列のカスタム テンプレートを渡す機能を追加することで、カスタム CustomTable コンポーネントを拡張しました。これらの機能により、テーブル内でのデータのレンダリング方法をより詳細に制御できると同時に、さまざまなユースケースに合わせてコンポーネントを柔軟に再利用できるようになります。

また、配列インデックスをキーとして使用することを避けるために rowKey プロパティを強制することでコンポーネントを改善し、より効率的で安定したレンダリングを確保しました。

このガイドがお役に立てば幸いです。コメントセクションでお気軽にご意見を共有してください。

この旅にお付き合いいただきありがとうございました! ?