React.js：如何过滤自定义属性上的 JSX 元素数组？

Question

我从一个简单的 JSX 元素数组开始：

const jsxArray = dataItems.map(item => (
  <div>
    <Header>{item.title}</Header>
    <Paragraph>{item.body}</Paragraph>
    <Paragraph customAttribute={item.isActive} >{item.tags}</Paragraph>    
  </div>
))

在渲染内部，或者更确切地说返回，因为我现在对所有内容都使用函数组件，我想过滤属性isActive被标记为 的JSX 元素true。

return (
  {jsxArray
    .filter(jsxElement => // want to filter in JSX elements 
      // that are true for customAttribute keyed to `item.isActive`)
  }
)

有什么办法可以做到吗？

如果没有一个好的方法，我愿意接受变通办法。

我可以在前面的步骤中简单地过滤数组。但这会导致一些额外的代码重复，因为我在其他地方仍然需要未过滤的 JSX 元素数组。

Answer 1

渲染列表后，您无需对其进行过滤。那时它只是一棵节点树，不再有太多意义了。

相反，您首先过滤项目，然后仅渲染通过您的条件的项目。

const jsxArray = dataItems.filter(item => item.isActive).map(item => (
  <div>
    <h3>{item.title}</p>
    <p>{item.body}</p>
    <p customAttribute={item.isActive} >{item.tags}</p>    
  </div>
))

我可以在前面的步骤中简单地过滤数组。但这会导致一些额外的代码重复，因为我在其他地方仍然需要未过滤的 JSX 元素数组。

不必要。当我自己处理这样的过滤时，我创建了两个变量，一个用于原始的未过滤列表，一个用于过滤后的项目。然后无论您要渲染什么，都可以根据需要选择其中之一。

const [items, setItems] = useState([])
const filteredItems = items.filter(item => item.isActive)

return <>
  <p>Total Items: ${items.length}</p>
  <ItemList items={filteredItems} />
</>