如何在React JS应用中实现Mixitup JS库

Question

我需要将Mixitup js库在ReactJS应用中实现为我的组件我该怎么做？

这是React的最新版本

我已经安装了它

npm i mixitup --save

那之后我该怎么办

这是我的代码

<div class="controls">
    <ul>
        <li class="control mixitup-control" data-filter=".red">red</li>
        <li class="control mixitup-control" data-filter=".blue">blue</li>
        <li class="control mixitup-control" data-filter=".green">green</li>
    </ul>
</div>
<div class="items">
    <div class="item green"></div>
    <div class="item green"></div>
    <div class="item blue"></div>
    <div class="item yellow"></div>
</div>

我希望它可以单击其中一个控件，并且它会根据我使用动画单击的内容过滤这些项目：）

Answer 1

只需使用使用效果挂钩即可起作用

import {useEffect} from 'react';
import mixitup from 'mixitup'
function App() {
// Just use an useEffect hook like that
useEffect(() => {
    mixitup(".items", {
      selectors: {
        target: ".item",
      },
      animation: {
        duration: 500
      }
    });
  }, []);
return (
    <div className="App">
      <YourComponents/>
    </div>
  );
}