如何从React(Typescript)同位素布局中找到过滤的项目计数

Question

我正在React(Typescript(中使用同位素布局库。我能够设法在我的页面中过滤工作。但我不知道如何返回筛选的项目计数。

页面加载时，我正在初始化同位素。

useEffect(() => {  
isotope.current = new Isotope(".iso-filter-container", {
itemSelector: ".iso-filter-item",
masonry: {
columnWidth: 50,  
gutter: 12        
} ,   
});   
// cleanup
return () => isotope.current?.destroy();
}, [fullcatalog]); 

onFilterChange处理筛选值并执行排列。

const onFilterChange = (val : Types.SelectedFilterValue ) => {          
var _str =  val.filterValue.map( x => ('(\|' + x + '\|)')).join('|');
var filterFns = { 
//match
matches: function(itemelement : Element) {
if(itemelement != null) {
try{
var strTarget : string  = itemelement.getAttribute('data-' + val.filterType.toLowerCase()) ?? '';  
return strTarget.match(new RegExp(_str, "i"));
}catch(e) {
console.log(e);
}
}     
},  
};
// use matching filter function
let pattern : any = filterFns['matches']  || '*';    
isotope.current?.arrange({ filter: pattern });     
};

同位素排列后，如何获得过滤项目数

Answer 1

同位素当前getFilteredItemElements((.length似乎返回了筛选项的长度。