在使用react-table

该示例在其npm page上显示了<ReactTable>组件的用法:

import ReactTable from 'react-table'
...
render() {
  return (
    <ReactTable
      data={data}
      columns={columns}
    />
  )
}

但是,他们在API Docsexamples上都使用usetable

import { usetable } from 'react-table';

function Table({ columns,data }) {
  // Use the state and functions returned from usetable to build your UI
  const {
    getTableProps,getTableBodyProps,headerGroups,rows,prepareRow,} = usetable({
    columns,data,})

  // Render the UI for your table
  return (
    <table {...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>
            )}
        )}
      </tbody>
    </table>
  )
}

...

render () {
  return (
    <Table columns={columns} data={data} />
  )
}

所以,我的问题是:当某人仅使用已提供的a为什么要使用钩子(usetable,useFilters等)并制作Table组件。 我很确定他们不会忘记更新他们的npm页面的示例...还是他们?

HWSGCH 回答:在使用react-table

react-table v7是一个“ headless” UI库,这意味着它仅提供后端表功能,并且它要求您使用自己的React组件来实现表的呈现。

这意味着您可以将后端表代码应用于所需的任何样式的表(例如,Bootstrap,Material UIvanilla HTML),并且可以精确控制将后端库连接到何处进入用户界面。

大多数表库(包括ReactTable!)具有预定义的功能和行为,在某些情况下可能不适合您。但是,当使用react-table v7时,您可以通过实现自己的UI代码,然后将其连接到react-table钩子代码来满足这些情况。

本文链接:https://www.f2er.com/3071012.html

大家都在问