再利用性の高いコンポーネントを作成する
汎用的なコンポーネントを作りたい！
でも、多すぎるpropsを渡していませんか？
以下の悪い例と良い例を見比べれば、
再利用性を高めるには、propsを適切に絞ることが重要だとわかるはず。
悪い例：
function Table({
data,
columns,
sortable = false,
filterable = false,
pagination,
rowActions = [],
headerStyle,
rowStyle,
striped = false,
onRowClick,
}) {
...
}
良い例
function Table<T>({ data, columns, onRowClick }) {...}
再利用性の高いテーブルコンポーネント作ってみよう！
以下は一般的なテーブルコンポーネントです。
propsとしてはdataとcolumnsだけを受け取っているのでバッチリOK。
（urlが渡されて、このコンポーネント内でフェッチしてもOK）
改善点はどこかな？
type Column = {
key: string;
header: string;
}
type TableProps = {
data: {
id: number;
name: string;
price: string;
stock: string;
}[];
columns: Column[];
}
const Table = ({ data, columns }: TableProps) => {
return (
<table>
<thead>
<tr>
{columns.map((column) => (
<th key="column.key">{column.header}</th>
))}
</tr>
</thead>
<tbody>
{data.map((row) => (
<tr key={row.id}>
<td>{row.id}</td>
<td>{row.name}</td>
<td>{row.price}</td>
<td>{row.stock}</td>
</tr>
))}
</tbody>
</table>
);
};
export default Table;
このままだとデータ構造が固定されてしまうね。
本当はどんなデータの形でも受け入れたいところ、、
リファクタリング１：ジェネリクスを使う
type Column<T> = {
key: keyof T;
header: string;
};
type TableProps<T> = {
data: T[];
columns: Column<T>[];
};
function Table<T extends { id: number }>({ data, columns }: TableProps<T>) {
return (
<table>
<thead>
<tr>
{columns.map((column) => (
<th key="column.key">{column.header}</th>
))}
</tr>
</thead>
<tbody>
{data.map((row) => (
<tr key={row.id}>
{columns.map((column) => (
<td key={String(column.key)}>{String(row[column.key])}</td>
))}
</tr>
))}
</tbody>
</table>
);
}
export default Table;
ジェネリクスを使用してデータ型を柔軟にしたよ。
セル（td）も繰り返し処理で記述できたよ。
import "./App.css";
import Table from "./components/Table";
type Product = {
id: number;
name: string;
price: string;
stock: string;
};
function App() {
const columns: Array<{
key: keyof Product;
header: string;
}> = [
{ key: "id", header: "ID" },
{ key: "name", header: "Name"},
{ key: "price", header: "Price" },
{ key: "stock", header: "Stock" },
];
const products: Product[] = [
{ id: 1, name: "Wireless Mouse", price: "$25.99", stock: "In Stock" },
{
id: 2,
name: "Mechanical Keyboard",
price: "$75.49",
stock: "Out of Stock",
},
{ id: 3, name: "USB-C Hub", price: "$45.00", stock: "In Stock" },
{
id: 4,
name: "Noise-Cancelling Headphones",
price: "$199.99",
stock: "In Stock",
},
{ id: 5, name: "Webcam", price: "$89.99", stock: "Out of Stock" },
];
return (
<>
<Table<Product> columns={columns} data={products} />
</>
);
}
export default App;
親コンポーネントでは型を定義し、型を子コンポーネントに渡しているよ。
リファクタリング２: セルに入る内容を柔軟化
import { ReactNode } from "react";
import "./App.css";
import Table from "./components/Table";
type Product = {
id: number;
name: string;
price: string;
stock: string;
};
function App() {
const columns: Array<{
key: keyof Product;
header: string;
render?: (value: Product[keyof Product]) => ReactNode;
}> = [
{ key: "id", header: "ID" },
{ key: "name", header: "Name", render: (value) => <a href="#">{value}</a> },
{ key: "price", header: "Price" },
{ key: "stock", header: "Stock" },
];
const products: Product[] = [
{ id: 1, name: "Wireless Mouse", price: "$25.99", stock: "In Stock" },
{
id: 2,
name: "Mechanical Keyboard",
price: "$75.49",
stock: "Out of Stock",
},
{ id: 3, name: "USB-C Hub", price: "$45.00", stock: "In Stock" },
{
id: 4,
name: "Noise-Cancelling Headphones",
price: "$199.99",
stock: "In Stock",
},
{ id: 5, name: "Webcam", price: "$89.99", stock: "Out of Stock" },
];
return (
<>
<Table<Product> columns={columns} data={products} />
</>
);
}
export default App;
columnsにオプショナルなrenderプロパティを追加したよ。
これで文字列に限らずなんでも入るようになったね。
この例では、リンクが入るようにしたよ。
import { ReactNode } from "react";
type Column<T> = {
key: keyof T;
header: string;
render?: (value: T[keyof T]) => ReactNode;
};
type TableProps<T> = {
data: T[];
columns: Column<T>[];
};
function Table<T extends { id: number }>({ data, columns }: TableProps<T>) {
return (
<table>
<thead>
<tr>
{columns.map((column) => (
<th key="column.key">{column.header}</th>
))}
</tr>
</thead>
<tbody>
{data.map((row) => (
<tr key={row.id}>
{columns.map((column) => (
<td key={String(column.key)}>
{column.render
? column.render(row[column.key])
: String(row[column.key])}
</td>
))}
</tr>
))}
</tbody>
</table>
);
}
export default Table;
renderプロパティの有無でセルの中身の表示を変えているよ。
リファクタリング３：コンポーネントを細分化する
import { ReactNode } from "react";
type Column<T> = {
key: keyof T;
header: string;
render?: (value: T[keyof T]) => ReactNode;
};
type TableProps<T> = {
data: T[];
columns: Column<T>[];
};
export default function Table<T extends { id: number | string }>({
data,
columns,
}: TableProps<T>) {
return (
<div>
<table>
<TableHeader columns={columns} />
<tbody>
{data.map((row) => (
<TableRow key={row.id} row={row} columns={columns} />
))}
</tbody>
</table>
</div>
);
}
type TableHeaderProps<T> = {
columns: Column<T>[];
};
function TableHeader<T>({ columns }: TableHeaderProps<T>) {
return (
<thead>
<tr>
{columns.map((column) => (
<th key={String(column.key)}>{column.header}</th>
))}
</tr>
</thead>
);
}
type TableRowProps<T> = {
row: T;
columns: Column<T>[];
};
function TableRow<T extends { id: number | string }>({
row,
columns,
}: TableRowProps<T>) {
return (
<tr key={row.id}>
{columns.map((column) => (
<TableCell
key={String(column.key)}
value={row[column.key]}
render={column.render}
/>
))}
</tr>
);
}
type TableCellProps<T> = {
value: T;
render?: (value: T) => ReactNode;
};
function TableCell<T>({ value, render }: TableCellProps<T>) {
return <td>{render ? render(value) : String(value)}</td>;
}
Tableコンポーネントを以下のように分けたよ。
- TableHeader
- TableRow
- TableCell
これで読みやすいし管理されているね。