如果showColumn state为true，如何隐藏列

Question

我正在使用andd渲染react中的表

我试图显示列，如果showColumn状态为真，隐藏列时，它是假

const menuColumns = [
{
title: "Date",
dataIndex: "createdAt",
key: "createdAt",
render: (_, { createdAt }) => (
<>
<Moment format="D MMM, YY">{createdAt}</Moment>
</>
),
},
{
title: "Action",
dataIndex: "",
key: "",
className: showColumn ? "show" : "hide",
render: record => (
<>
{!record.kitchen_received ?
<Button type="primary" onClick={() => showModal(record)}>
Delivered
</Button> : <i className='bi-check-lg'></i>}
</>
),
},
];

Answer 1

如果您不需要添加，您可以潜在地避免将整个列添加到menuColumns?是这样的吗?

const menuColumns = [
{
title: "Date",
dataIndex: "createdAt",
key: "createdAt",
render: (_, { createdAt }) => (
<>
<Moment format="D MMM, YY">{createdAt}</Moment>
</>
),
},
(showColumn ? {
title: "Action",
dataIndex: "",
key: "",
render: record => (
<>
{!record.kitchen_received ?
<Button type="primary" onClick={() => showModal(record)}>
Delivered
</Button> : <i className='bi-check-lg'></i>}
</>
),
} : {})
];

或者基于您使用classNames设置它的方式，您可以在列应用hide类时仅显示none ?

Answer 2

@leo给出的解决方案也可以。或者，您可以保持列处于状态，并通过在单击时动态推送所需的列来更新状态。此方法可以帮助您推送具有动态属性的列，您可以将其传递给onClick。例如:用户可以选择不同数量的水果，而您希望将水果名称显示为列。

要隐藏它们:您可以简单地将它们从状态中删除。