如何将 addFilter() 与 react-slick 一起使用？

Question

我正在开发反应。 我想使用滑块，所以我决定使用一个名为“react-slick”的库。

我曾经在 React 开发环境以外的地方使用过一个名为“slick”的库。 “slick”具有向滑块添加、删除和过滤元素的方法，例如 slickAdd()、slickRemove() 和 slickFilter()。 但是，看起来这还没有在 react-slick 中实现。

我主要想使用 SlickFilter()，我该如何实现呢？

---

react-slick的demo页面在这里，可惜没有关于filter的demo。

https://react-slick.neostack.com/docs/example/simple-slider

另一方面，即使在 slick 上，页面上也有一个名为“过滤”的演示。

http://kenwheeler.github.io/slick/

Answer 1

您应该根据所需的过滤器决定何时渲染幻灯片项目，例如，如果我们单击以切换奇数幻灯片的视图，则此代码过滤幻灯片：

import React, { useState } from "react";
import Slider from "react-slick";


export default function App() {
  const [isOdd, setOdd] = useState(false);
  var settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1
  };
  let Slides = [
    <div key="1">
      <h3>1</h3>
    </div>,
    <div key="2">
      <h3>2</h3>
    </div>,
    <div  key="3">
      <h3>3</h3>
    </div>,
    <div key="4">
      <h3>4</h3>
    </div>,
    <div>
      <h3>5</h3>
    </div>,
    <div>
      <h3>6</h3>
    </div>
  ];
  return (
    <div>
      <h2> Single Item</h2>
      <Slider {...settings}>
        {Slides.map((item, key) => {
          if (isOdd) {
            return key % 2 === 0 ? item : null;
          }
          return item;
        })}
      </Slider>
      <hr />
      <button onClick={() => setOdd(!isOdd)}>toggle</button>
    </div>
  );