Reactjs React-Antd-Show/Hide表中的列

我想解决一个问题。 如何在React中使用Ant Design显示/隐藏表中的列

export const columns = () => [
 {
   key: "anyKeyOne",
   title: "Title one",
   dataSource: "AnyOne",
   hide: true
 },
 {
   key: "anyKeyTwo",
   title: "TitleTwo",
   dataSource: "AnyTwo",
   hide: false
 }
]

hideColumns = () => {
 // 
}

render() {
 return (
  <div>
   <Table 
     dataSource={store.data}
     columns={this.hideColumns}
   />
  </div>
 )
}

export const columns=（）=>[
{
密钥：“任意密钥”，
标题：“标题一”，
数据源：“任何人”，
隐藏：真的
},
{
键：“任意键2”，
标题：“TitleTwo”，
数据源：“任意两个”，
隐藏：假
}
]
hideColumns=（）=>{
// 
}
render（）{
返回(
)
}

---

谢谢您的回答。

您可以设置一个布尔状态属性，如hideColumn

<div>
   <Table 
     dataSource={store.data}
     columns={this.state.hideColumn? this.state.columns: this.state.columns}
   />
  </div>

---

使用此函数构建可见列阵列。它使用dataIndex来比较需要显示的列名

通过从复选框组中推送值来形成所需的ArrayOfColumn

let  columnsDisplayed = _.remove(columns, function(n) {
  return arrayOfColumnsNeeded.includes(n.dataIndex);
});

---

你能解释一下这个想法吗？我假设你的列和hideColumn是两个不同的列设置。所以通过将this.state.hideColumn设置为true或false，你可以显示或隐藏列。