Reactjs 如何显示和隐藏React表上的某些列？

我已经创建了一个React表。我想通过用户操作隐藏或显示表中的某些列。默认情况下，所有列都应该可见，但我们将有一些复选框来隐藏或显示某些列

假设我想显示8列中的4列。请建议我一个简单的技巧来实现这一点

我的列标题数组是

  const columns = [
  {
Header: 'Column 1',
    columns: [
       {
           Header: 'S Column 1',
           accessor: 'firstName'
       }
  ]
    },
   {
  Header: 'Column 2',
   columns: [
     {
        Header: 'S Column 2',
        accessor: 'firstName'
      }
   ]
       },
     {
        Header: 'Column 3',
        columns: [
     {
        Header: 'S Column 3',
        accessor: 'firstName'
      }
     ]
     },
       {
      Header: 'Column 4',
      columns: [
        {
        Header: 'S column 4',
        accessor: 'firstName'
       }
      ]
       },
     {
 Header: 'Column 5',
columns: [
     {
Header: 'S column 5',
 accessor: 'firstName'
    }
   ]
  },
  {
 Header: 'Column 6',
 columns: [
 {
    Header: 'S column 6a',
    accessor: 'firstName'
  },
    {
    Header: 'S column 6b',
    accessor: 'firstName'
   },
   {
    Header: 'S column 6c',
    accessor: 'firstName'
     },
   {
     Header: 'S column 6d',
     accessor: 'firstName'
     }
  ]
    },
  {
 Header: 'Column 7',
 columns: [
 {
  Header: 'S column 7',
     accessor: 'firstName'
   }
     ]
    },
    {
    Header: 'Column 8',
    columns: [
  {
   Header: 'S Column 8a',
   accessor: 'firstName'
  },
 {
   Header: 'S Column 8b',
   accessor: 'firstName'
   },
   {
Header: 'S Column 8c',
accessor: 'firstName'
  },
  {
  Header: 'S Column 8d',
  accessor: 'firstName'
  }
 ]
  },
  ];

请帮助我用最简单的方法实现这个功能

---

如果可以，您可以在codesandbox上显示演示。

列中有一个属性

show

show:true，//可用于隐藏列

将其设为false以隐藏特定列。将用户的复选框值保持在状态。

注意：列属性

show

已弃用。改用

initialstate.hiddenColumns

---

检查：

视觉隐藏的样式css是否不起作用？不，我认为只有css不起作用。如果可以的话，你可以展示一个演示。你能在代码沙盒上给我展示一个演示吗。我是React的初学者。你能给我演示一下，如果复选框被取消选中，我如何禁用一个列吗？非常感谢。还有一个问题。您已将复选框用作名字。但我想为整个名字做些什么。如果我禁用名称，那么名字和姓氏都将被禁用。你能在你的演示中做最后的修改吗？哈哈@Scooby，你真的应该学习一下react和它的概念；）我在沙箱里做了改变。过来看。！谢谢帮我省去了一些搜索——以前的故事书文档似乎已经不见了