reactjs - 删除 react 表中的标题名称并将其设为空

Question

我正在尝试为 react 表创建一个新的复选框列。我不需要标题名称
对于复选框列。如果我在标题中输入一个空字符串，我的应用程序就会崩溃并收到以下错误消息

    const columns = React.useMemo(
        () => [
          {
             //id: 'checkbox',
            Header: '',
            accessor: '',
            width: 25,
            Cell: ({ row }: any) => {
              return <input type='checkbox' className={classes.mystyle} />
            },
          },
          {
            Header: 'Jungle Name',
            accessor: 'JungleMan',
          }
        ]
    )

我怎样才能用一个空的标题来做到这一点？

Answer 1

评论中提供的答案在技术上是正确的，但也是一个黑客。有一种非解决方法可以做到这一点:只需提供一个 id列的关键。此使用 id在 useTable hook docs 中有描述:

Technically speaking, [accessor] isn't required if you have a unique id for a column.

像“复选框”这样的名称不会出现，因为要求是唯一的。因此，它可能应该更具描述性。此外， Header明确是一个 Optional 属性——你可以完全省略它，而不会有任何损害。

因此，您的列可以看起来像:

   const columns = React.useMemo(
        () => [
          {
            id: 'checkbox-table-column'
            width: 25,
            Cell: ({ row }: any) => {
              return <input type='checkbox' className={classes.mystyle} />
            },
          },
          {
            Header: 'Jungle Name',
            accessor: 'JungleMan',
          }
        ],
      []
    );

(另外:修复了依赖数组没有传递给 useMemo 的小错误。它会让你这样做，但如果你自己传递一个，甚至是空的，失败的机会就会减少。)