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

【问题标题】：How to use addFilter() with react-slick?如何将 addFilter() 与 react-slick 一起使用？
【发布时间】：2020-11-10 10:10:36
【问题描述】：

我正在使用 react 进行开发。而且我想使用滑块，所以我决定使用一个名为“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 上，页面上也有一个名为“Filtering”的演示。

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

【问题讨论】：

标签： javascript jquery reactjs slick.js

【解决方案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>
  );

【讨论】：