reactjs - 删除反应表中的标题名称并使其为空

Question

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

    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',
          }
        ]
    )

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

标签： reactjsreact-table

Answer 1

评论中提供的答案在技术上是正确的，但也非常有技巧。有一种非解决方法可以做到这一点：只需提供idColumn 的键。在useTable 钩子文档id中描述了这种用法：

从技术上讲，如果您有一个列的唯一 ID，则不需要 [accessor]。

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

因此，您的专栏可能看起来像：

   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。它会让你做到这一点，但如果你自己传递一个，即使是空的，失败的机会也会更少。）