React.js中使用react-table时如何为<tr>元素添加自定义类名

解决方案 #

你可以通过以下两种方式实现指定行自定义类名的需求： #

方式1：直接在渲染行标签时拼接类名（灵活适配临时需求）

直接在tr标签渲染阶段，根据行数据判断条件，合并原有类名和自定义类名即可，修改你代码中tbody里的行渲染逻辑：

{rows.map((row, i) => {
    prepareRow(row);
    // 这里替换成你自己的判断逻辑，比如根据行原始数据的某个字段判断
    const customRowClass = row.original.needHighlight ? 'highlight-row' : '';
    // 获取react-table默认的行props，合并自定义类名
    const rowProps = row.getRowProps();
    return (
        <tr 
            {...rowProps}
            className={`${rowProps.className || ''} ${customRowClass}`.trim()}
        >
            {row.cells.map(cell => {
                return (
                    <td {...cell.getCellProps()}>
                        {cell.render('Cell')}
                    </td>
                );
            })}
        </tr>
    );
})}

方式2：在useTable配置中声明getRowProps（符合react-table设计规范，适合通用组件）

直接在useTable的配置项里添加getRowProps回调，react-table会自动应用你返回的类名，无需修改渲染逻辑，修改useTable的入参：

const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
    state: { expanded },
} = useTable(
    {
        className,
        colSpan,
        columns,
        data,
        // 新增这部分配置
        getRowProps: (row) => {
            // 替换成你自己的判断逻辑
            if (row.original.needDisabled) {
                return {
                    className: 'disabled-row'
                }
            }
            return {}
        }
    },
    useExpanded
);

两种方式都可以正常实现需求，如果你是做通用组件，更推荐第二种方式，你可以把自定义类名的判断逻辑通过props暴露给父组件调用，灵活度更高。

内容的提问来源于stack exchange，提问作者Nick