我在 React js 工作,我已经实现了 react-table 的通用组件
我正在使用 react-table表的库。
我需要为某些特定行添加自定义类。
我已经尝试添加几个行 Prop ,但我没有成功。
这是我的表格示例
import React from 'react';
import { useTable, useExpanded } from 'react-table';
function Table({ className, colSpan, columns, data }) {
// Use the state and functions returned from useTable to build your UI
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
state: { expanded },
} = useTable(
{
className,
colSpan,
columns,
data,
},
useExpanded // Use the useExpanded plugin hook
);
// Render the UI for your table
return (
<table className={className} {...getTableProps()}>
<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, i) => {
prepareRow(row);
return (
<tr {...row.getRowProps()}>
{row.cells.map(cell => {
return (
<td {...cell.getCellProps()}>
{cell.render('Cell')}
</td>
);
})}
</tr>
);
})}
{rows.length === 0 && (
<tr>
<td colSpan={colSpan}>No Record Found</td>
</tr>
)}
</tbody>
</table>
);
最佳答案
在 PropsMethods 中传递类名。
<tr {...row.getRowProps({className: 'row'})}>
{row.cells.map(cell => {
return <td {...cell.getCellProps({className: 'cell'})}>
{cell.render('Cell')}</td>
})}
</tr>
Here是您可能希望实现的目标的示例。
关于javascript - 如何在 React Js 中为 react 表的 <tr> 添加类?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69341564/