我正在研究数据表组件的渲染方法,我必须在其中过滤一些 header 。
我有这个:
<TableRow>
{headers.map(header =>
checkboxes.map(checkbox =>
// HERE I NEED TO FILTER IT
checkbox.value === header.key && checkbox.checked && (
<TableHeader {...getHeaderProps({ header })}>
{header.header}
</TableHeader>
),
),
)}
</TableRow>
您在上面看到的 checkbox.checked
返回 true
或 false
,我需要 2 个键来忽略这些条件。条件是否满足并不重要。
在这里,我检查 checkbox
和 header
的值是否相同 checkbox.value === header.key
但我需要排除 2 个 header.key
,即 header.key === device
和 header.key === TicketNumber
。
所以我需要做这样的事情:
<TableRow>
{headers.map(header =>
checkboxes.map(checkbox =>
// HERE I NEED TO FILTER IT
checkbox.value === header.key && checkbox.checked && (ignore header.key === 'device' && header.key === 'ticketNumber' from the conditionals above) (
<TableHeader {...getHeaderProps({ header })}>
{header.header}
</TableHeader>
),
),
)}
</TableRow>
我的意思是,我在上面的代码中提到的这两个 header 永远不应该从 UI 中隐藏。当满足此条件 checkbox.value === header.key && checkbox.checked
时,它将隐藏所有 checkbox.checked === true
的 header ,但是我需要一个适当的条件/函数来忽略 header 键 header.key === device
和 header.key === TicketNumber
。这两个 header 应该始终存在于 UI 中。
我正在使用lodash,我不知道是否可以在那里使用它或者是否有其他选择?
最佳答案
如果我正确理解您的要求,我认为这应该可行:
<TableRow>
{headers.map(header =>
(['device', 'ticketNumber'].includes(header.key) || checkboxes.find(checkbox => header.key === checkbox.value).checked) &&
<TableHeader {...getHeaderProps({ header })}>
{header.header}
</TableHeader>
)}
</TableRow>
关于javascript - 如何从数组中排除某些键,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53730954/