如何將 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>
  );