如何管理noDataComponent或显示在ReactTableV7中找不到的行

Question

过去几个月我一直在使用旧版本的React Table，现在当我开始使用最新版本v7时，我开始在自定义表时遇到困难，因为在表中找不到要显示的数据。它不会显示任何类似"找不到行"的消息，该消息以前在表的早期版本中显示过。如何渲染noDataComponent。

Answer 1

由于v7是无头的，您要负责在不同条件下的输出。您可能有类似map()的东西来迭代数据数组，类似于：

<TableBody>
{page.map((row) => {
prepareRow(row);
return (
<TableRow {...row.getRowProps()}>
{row.cells.map((cell) => {
return (
<TableCell {...cell.getCellProps()}>
{cell.render('Cell')}
</TableCell>
);
})}
</TableRow>
);
})}
</TableBody>

您可以添加一些代码来检测未找到行的情况，类似于：

{page.length === 0 &&
<TableRow>
<TableCell>
No data to display
</TableCell>
</TableRow>
}