reactjs - 如何在 ReactTable V7 中管理 noDataComponent 或显示未找到的行

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