问题描述
我在 NextJS 项目中使用 react-table，我想知道如何在同一页面上拥有多个表。一直在挖掘，但没有找到任何相关信息。
我已经在页面上有一个实例，我不确定是不是我想多了，但我想我可以制作一个 tableInstance2 但是，我如何告诉第二个表 JSX使用第二批数据？
const tableInstance = useTable({
columns: COLUMNS,data: tableData
},useSortBy);
const {
getTableProps,getTableBodyProps,headerGroups,rows,prepareRow
} = tableInstance;
这是我当前的表格标记：
{tableData.length > 0 &&
<div className={styles.tableSpace}>
<table {...getTableProps()} className={styles.table}>
<thead className={styles.thead}>
{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()} className={styles.tr}>
{headerGroup.headers.map((column) => (
<th {...column.getHeaderProps(column.getSortByToggleProps())} className={styles.th}>
{column.render('Header')}
{column.Header !== 'Description' &&
<span>
{column.isSorted ? (column.isSortedDesc ? <FontAwesomeIcon className={styles.faCaretDown} icon={faCaretDown} /> : <FontAwesomeIcon className={styles.faCaretUp} icon={faCaretUp} />) : <FontAwesomeIcon className={styles.faArrowsAltV} icon={faArrowsAltV} />}
</span>
}
</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps} className={styles.tbody}>
{rows.map(row => {
prepareRow(row)
return (
<tr {...row.getRowProps()} className={styles.tr}>
{row.cells.map((cell) => {
return (
<td {...cell.getCellProps()} className={styles.td}>
{cell.render('Cell')}
</td>
)
})}
</tr>
)
})}
</tbody>
</table>
</div>
}
在同一个页面（在同一个文件中）可以有 1 个以上吗？ 将不胜感激任何提示。非常感谢！
解决方法
如果两个表之间有合理的重用，您应该考虑实现自己的包含 useTable 钩子的 Table 组件。
但是，如果您真的想在同一个组件中包含两个表，您可以按照此 MDN Example 中的描述重命名解构变量。这允许您区分两个表的变量。
参见示例（将变量重命名为适合您应用程序上下文的名称）：
const {
getTableProps: getFirstTableProps,getTableBodyProps: getFirstTableBodyProps,headerGroups: firstGeaderGroups,rows: firstRows,prepareRow: firstPrepareRow
} = tableInstance;
React table 帮助您制作自己的表格组件 - 您做到了。您只需要将您的表格移动到它自己的文件中并概括列。
下面是一个通用且可重用的表格示例 - 您可以像任何 official examples 一样扩展您的表格组件，以启用诸如分页或排序之类的功能。 React-table 还希望您memoize the columns（和数据），因此我将列转换为可重用组件中的备忘录，这样您就不必在每个带有表格的页面上。
table.js
export const Table = ({ columns,data,noDataComponent,...rest }) => {
const tableColumns = useMemo(() => columns,[columns]);
const { getTableBodyProps,getTableProps,headerGroups,prepareRow,rows } = useTable({ columns: tableColumns,data });
if (!rows.length) {
if (noDataComponent) return noDataComponent;
return <>No data</>;
}
return (
<table {...getTableProps()} {...rest}>
<thead>
{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<th {...column.getHeaderProps()}>{column.render('Header')}</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{rows.map((row) => {
prepareRow(row);
return (
<tr {...row.getRowProps()}>
{row.cells.map((cell) => {
const { className,style } = cell.column;
return (
<td {...cell.getCellProps({ className,style })}>
{cell.render('Cell')}
</td>
);
})}
</tr>
);
})}
</tbody>
</table>
);
};
使用可重用组件在同一页面上的多个表。每个表都可以拥有自己的数据、列数等 - 它们彼此独立。
const columns = [
{
Header: 'Test ID',accessor: 'test.id',// use dot notation for nested data
style: { width: '75px' },},{
Header: 'Name',accessor: 'name',{
accessor: 'id',style: { width: '75px' },Cell: ({ cell }) => {
const { 'test.id': testId,name,id }= cell.row.values; // access other data from the row
console.log(cell);
return <>Custom component</> // return any ReactNode like a delete button,icons,transform the value,etc.
},];
const TablePage = () => (
<>
<Table data={tableData} columns={columns} />
<Table data={tableData2} columns={columns2} />
</>
)
我非常感谢对此的回复。他们共同引导我的想法并帮助我找到最适合我的情况的解决方案。似乎是处理这个问题的不同方法，但因为我的表格标记有一些差异，一个有排序功能，另一个没有......我选择不把自己画在角落里，只有 1 个可重用的表格组件。
为了将来在添加新表时的可维护性和更大的灵活性，我选择为每个表创建一个组件，并将这两个表作为组件包含在页面上。
两个表所需的数据仍然在页面级别检索，然后将数据传递到各自的组件中。每个组件中定义了不同的列，不同的表实例也是如此。
再次感谢您给我选择的人。