如何使CSS中的visibleSlides数在纯反应旋转木马中响应

Question

如何使CSS中响应的visibleSlides数响应?/不必使用JS根据断点更改visibleSlides。

例如，；每一张幻灯片都有min-width: 100px; min-height: 100px; ie。图像，我们希望看到细节，所以不应该小于100 to。

我们将visibleSlides设置为8(用于桌面)。在手机上，我们只想展示两张幻灯片。因为我们不希望单个幻灯片的高度和宽度小于100‘t，也不希望幻灯片重叠。

我知道我们可以使用react来检查屏幕宽度并设置visibleSlides，但是对于所有的应用程序来说，访问它并不容易，特别是服务器端呈现为next.js。

看这个沙箱https://codesandbox.io/s/pure-react-carousel-responsive-visible-slides-k8cui

(分叉从)

Answer 1

我的应用程序遇到了这个问题，实际上我无法在CSS上找到这样的方法。但是，我已经使用ResizeObserver和react-hooks实现了这一点。

我正在使用next js，在服务器端实现它并不是什么大问题。

这是我的解决方案，希望能有所帮助。

步骤1.创建一个观察者钩子来监听来自应用程序的调整大小的事件。

import { useEffect, useState, RefObject } from 'react';
import ResizeObserver from 'resize-observer-polyfill';

interface DOMRectReadOnly {
  readonly bottom: number;
  readonly height: number;
  readonly left: number;
  readonly right: number;
  readonly top: number;
  readonly width: number;
  readonly x: number;
  readonly y: number;
}

interface useResizeObserverProperties {
  ref?: RefObject<Element> | null;

  element?: Element | null | undefined;

  callback?: (entry: ResizeObserverEntry) => void;
}

const IS_BROWSER = typeof window !== 'undefined';

/**
 * Watch for the resizing of a React component or Element.
 *
 * @param hookProperties - Configuration optinos for the hook.
 *
 * @returns The `DOMRect` for the observed element.
 */
export const useResizeObserver = ({
  ref,
  element,
  callback,
}: useResizeObserverProperties) => {
  const [sizes, setSizes] = useState<DOMRectReadOnly>({
    bottom: 0,
    height: 0,
    left: 0,
    right: 0,
    top: 0,
    width: 0,
    x: 0,
    y: 0,
  });

  const handleResize = (entries: ResizeObserverEntry[]) => {
    const [entry] = entries;

    if (callback) callback(entry);

    setSizes(entry.contentRect);
  };

  const [resizeObs] = useState(() =>
    IS_BROWSER ? new ResizeObserver(handleResize) : undefined,
  );

  useEffect(() => {
    if (!resizeObs) return;
    let domNode;

    if (ref) {
      domNode = ref.current;
    } else if (element) {
      domNode = element;
    }

    if (domNode) {
      resizeObs.observe(domNode);
    }

    return () => resizeObs.disconnect();
  }, [ref, resizeObs, element]);

  return sizes;
};

步骤2.在您的component.tsx中

import React, { useState, useRef } from 'react';
import { CarouselProvider, Slider, Slide } from 'pure-react-carousel';
import { useResizeObserver } from 'from previously created file';

const YourComponent = () => {
  const [visibleSlides, setVisibleSlides] = useState(1);
  const ref = useRef<HTMLDivElement>(null);

  // Current width of element
  const { width } = useResizeObserver({ ref });

  switch (true) {
    case width > 768 && width < 1280:
      setVisibleSlides(2);
      break;
    /**
     * Switch your cases here
     */
  }

  return (
    <div ref={ref}>
      <CarouselProvider
        naturalSlideWidth={100}
        naturalSlideHeight={125}
        totalSlides={3}
        visibleSlides={visibleSlides}
      >
        <Slider>
          <Slide index={0}>Slide 1</Slide>
          <Slide index={1}>Slide 2</Slide>
          <Slide index={2}>Slide 3</Slide>
        </Slider>
      </CarouselProvider>
    </div>
  );
};

export default YourComponent;

顺便说一句，我建议您使用throttle setVisibleSlides调用，以避免在使用开发工具调整窗口大小时重新呈现太多。

Answer 2

不是回答，但我也想这么做。如何使用React useState作为visibleSlides整数，并创建一个窗口侦听器来侦听断点并根据需要更改状态.

Answer 3

如何设置状态并使用useEffect更新窗口大小调整时的状态，然后将窗口大小作为支柱传递给旋转木马组件并选择使用该道具的可视窗口数？

https://codesandbox.io/s/pure-react-carousel-responsive-visible-slides-forked-q29c1d?file=/src/App.js