Javascript 如何使用muurireact库过滤元素

我正在使用react，我正在使用一个名为MuuriReact的库。在本例中，我使用它通过名为category的属性过滤元素（请参见代码的链接）。此类别接收一个值。在本例中，我将通过技术过滤元素，例如一个名为“javascript”的类别、其他react、其他节点等。 我遵循官方文件，但没有工作

import React，{useState，useCallback}来自“React”；
从“muuri react”导入{MuuriComponent}；
从“/components/Item”导入项目；
导出默认函数App（）{
const[data，setData]=useState（“”）；
const[projects，setProjects]=useState([
{
重点:1,，
类别：“javascript”，
项目名称：“康塔多”
},
{
重点:二,，
类别：“javascript”，
项目名称：“康塔多”
},
{
重点:三,，
类别：“javascript”，
项目名称：“康塔多”
},
{
重点:四,，
类别：“反应”，
项目名称：“康塔多”
},
{
重点:五,，
类别：“反应”，
项目名称：“康塔多”
},
{
重点:6,，
类别：“反应”，
项目名称：“康塔多”
},
{
关键：7，
类别：“反应”，
项目名称：“康塔多”
},
{
关键词：8，
类别：“反应”，
项目名称：“康塔多”
},
{
关键词：9，
类别：“节点”，
项目名称：“康塔多”
},
{
关键词：10，
类别：“节点”，
项目名称：“康塔多”
},
{
关键词：11，
类别：“javascript”，
项目名称：“康塔多”
}
]);
const children=projects.map（（project）=>(
));
让getActiveCategory=（id）=>{
让li=document.queryselectoral（“.li公文包”）；
设arrayLi=Array.from（li）；
过滤器（（option，i）=>i==id&&setData（option.innerHTML））；
};
const filter=useCallback(
（{category}）=>{
//返回类别。indexOf（输入）>-1；
返回类别。indexOf（数据）>-1；
},
[数据]
);
返回(

getActiveCategory（0）}>
全部的

getActiveCategory（1）}
>
javascript

getActiveCategory（2）}
>
反应

getActiveCategory（3）}
>
节点


（{category}）}
过滤器={filter}
>
{儿童}
);
}

我的想法是，当我单击这个过滤器中的一个元素时，会按catgory的名称过滤框。我在这个州有价值，但也许我错过了一些我看不到的东西。您可以在此链接中看到练习：

/*反应*/
从“React”导入React，{useState，useCallback}；
导入“/styles.css”；
从“muuri react”导入{MuuriComponent}；
//应用程序。
常量应用=（）=>{
//项目状态。`在此处输入代码`
const[projects]=useState([
{
重点:1,，
类别：“javascript”，
项目名称：“康塔多”
},
{
重点:二,，
类别：“javascript”，
项目名称：“康塔多”
},
{
重点:三,，
类别：“javascript”，
项目名称：“康塔多”
},
{
重点:四,，
类别：“反应”，
项目名称：“康塔多”
},
{
重点:五,，
类别：“反应”，
项目名称：“康塔多”
},
{
重点:6,，
类别：“反应”，
项目名称：“康塔多”
},
{
关键：7，
类别：“反应”，
项目名称：“康塔多”
},
{
关键词：8，
类别：“反应”，
项目名称：“康塔多”
},
{
关键词：9，
类别：“节点”，
项目名称：“康塔多”
},
{
关键词：10，
类别：“节点”，
项目名称：“康塔多”
},
{
关键词：11，
类别：“javascript”，
项目名称：“康塔多”
}
]);
//过滤状态。
常量[filter，setFilter]=useState({
价值：“全部”
});
//过滤方法。
const filterFunction=useCallback(
功能（数据）{
var isFilterMatch=
filter.value==“全部”？true:data.category===filter.value；
返回isFilterMatch；
},
[筛选值]
);
//孩子们。
const children=projects.map（{key，category}）=>(
));
返回(
{/*头*/}
setFilter（{…filter，value:e.target.value}）
/>
（{category}）}
过滤器={filterFunction}
>
{儿童}
);
};
//项目组成部分。
常量项=（{category}）=>{
返回(
{类别}
);
};
常量选择=（{values，onChange}）=>{
返回(
；
；
{values.map（（值，i）=>(
{value}
))}
);
};
导出默认应用程序；

我将其用作资源：我的沙箱在这里：

/* React */
import React, { useState, useCallback } from "react";
import "./styles.css";
import { MuuriComponent } from "muuri-react";

// App.
const App = () => {
  // Items state.`enter code here`
  const [projects] = useState([
    {
      key: 1,
      category: "javascript",
      ProjectName: "contador"
    },
    {
      key: 2,
      category: "javascript",
      ProjectName: "contador"
    },
    {
      key: 3,
      category: "javascript",
      ProjectName: "contador"
    },
    {
      key: 4,
      category: "react",
      ProjectName: "contador"
    },
    {
      key: 5,
      category: "react",
      ProjectName: "contador"
    },
    {
      key: 6,
      category: "react",
      ProjectName: "contador"
    },
    {
      key: 7,
      category: "react",
      ProjectName: "contador"
    },
    {
      key: 8,
      category: "react",
      ProjectName: "contador"
    },
    {
      key: 9,
      category: "node",
      ProjectName: "contador"
    },
    {
      key: 10,
      category: "node",
      ProjectName: "contador"
    },
    {
      key: 11,
      category: "javascript",
      ProjectName: "contador"
    }
  ]);

  // Filter state.
  const [filter, setFilter] = useState({
    value: "all"
  });

  // Filter method.
  const filterFunction = useCallback(
    function (data) {
      var isFilterMatch =
        filter.value === "all" ? true : data.category === filter.value;
      return isFilterMatch;
    },
    [filter.value]
  );

  // Children.
  const children = projects.map(({ key, category }) => (
    <Item key={key} category={category} />
  ));

  return (
    <div>
      {/* Header */}

      <Select
        values={["All", "javascript", "react", "node"]}
        onChange={(e) => setFilter({ ...filter, value: e.target.value })}
      />

      <MuuriComponent
        propsToData={({ category }) => ({ category })}
        filter={filterFunction}
      >
        {children}
      </MuuriComponent>
    </div>
  );
};

// Item component.
const Item = ({ category }) => {
  return (
    <div className="muuri-item">
      <div className="item-content">
        <div className="card">
          <div className="card-title">{category}</div>
        </div>
      </div>
    </div>
  );
};
const Select = ({ values, onChange }) => {
  return (
    <div className="control">
      <div className="control-icon">
        <i className="material-icons">&#xE152;</i>
      </div>
      <div className="select-arrow">
        <i className="material-icons">&#xE313;</i>
      </div>
      <select
        className="control-field filter-field form-control"
        onChange={onChange}
        defaultValue={values[0]}
      >
        {values.map((value, i) => (
          <option key={i} value={value.toLowerCase()}>
            {value}
          </option>
        ))}
      </select>
    </div>
  );
};
export default App;