如何从React(Typescript)isotope-layout中找到被筛选的项的数量？

首先，在 React 组件中导入 isotope-layout 库：

import Isotope from 'isotope-layout'

在组件类中定义一个方法来获取筛选的项的数量：

getFilteredItemsCount = () => { const isotopeInstance = Isotope.data('#isotope-cont ai ner'); // 在包含项的 容器 上获取 isotope 实例 const filteredItems = isotopeInstance.filteredItems; // 获取筛选后的项 return filteredItems.length; // 返回筛选后的项的数量

在组件渲染时，使用 <Isotope> 包装项的 容器 ，并将其包含的项传递给 itemElements 属性：

render() { const items = [ /* ...列表中的项 / ] return ( <Isotope id='isotope-cont ai ner' elementType={'div'} o pt ions={{ / 选项 / }} itemElements={items} { / 渲染项的 容器 */ } </Isotope>

注：在 options 属性中指定 isotope 的选项。

最后，在组件的某个方法中 调用 getFilteredItemsCount 来获取筛选的项的数量：

handleFilter = (filterValue: string) => { // ...筛选逻辑 const filteredItemsCount = this.getFilteredItemsCount(); // 获取筛选的项的数量 console.log(filteredItemsCount); // 打印筛选的项的数量

这样，我们就可以轻松地从 React(Types cr i pt ) isotope-layout 中获取筛选的项的数量了。