Question

我正在研究数据表组件的render方法，其中我必须过滤一些标头。

我有这个：

  <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和{ {1}}。

所以我需要做类似的事情：

header.key === device

我的意思是，我在上面的代码中提到的那两个标头永远都不应从UI中隐藏。满足此条件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>隐藏所有标题，但我需要一个适当的条件/函数来忽略标题键checkbox.value === header.key && checkbox.checked和checkbox.checked === true。这2个标头应始终存在于UI中。

我正在使用lodash，我不知道是否可以在其中使用它或是否有其他选择？

Answer 1

如果我正确理解了您的要求，我认为这应该可行：

<TableRow>
  {headers.map(header =>
     (['device', 'ticketNumber'].includes(header.key) || checkboxes.find(checkbox => header.key === checkbox.value).checked) && 
       <TableHeader {...getHeaderProps({ header })}>               
         {header.header}
       </TableHeader>
  )}
</TableRow>

Answer 2

您可以在组件外部创建一个简单的shouldShow()方法。该方法应包括您的条件，并返回一个布尔值。

由于您有3个复选框，并且只想显示相关的列，所以当选中其中一个时，您应该删除第二个地图，并使用Array.some()检查其中至少一个是checked，并且value与密钥相同value。

注意：您不需要实际过滤数组，因为react在渲染中会忽略false的值（请参见conditional rendering）。它还会忽略undefined和null。

const shouldShow = ({ key }, checkboxes) =>
  key === 'device' || 
  key === 'ticketNumber' || 
  checkboxes.some(({ checked, value }) => checked && value === key);

<TableRow>
  {headers.map(header =>
    shouldShow(header, checkboxes) && (
      <TableHeader {...getHeaderProps({ header })}>               
        {header.header}
      </TableHeader>
    ),
  )}
</TableRow>

更好的解决方案是使用Array.reduce()创建一组检查键，然后在渲染列时检查其中是否存在该键：

 // in the render method
const shouldRenderSet = checkboxes.reduce((r, { checked, value }) =>
  checked ? r.add(value) : r
, new Set(['device', 'ticketNumber'])) 

<TableRow>
  {headers.map(header =>
    shouldRenderSet.has(header.key) && (
      <TableHeader {...getHeaderProps({ header })}>               
        {header.header}
      </TableHeader>
    ),
  )}
</TableRow>

如何从数组中排除一些键

2 个答案: