如何在 React 功能组件中使用 Splide 同步方法

Question

我需要一个控制显示滑块的缩略图滑块。在 Splide 文档 (https://splidejs.com/integration-react-splide/) 中，他们使用基于类的组件中调用的同步方法来执行此操作：

this.primaryRef   = React.createRef();
        this.secondaryRef = React.createRef();
    }

    componentDidMount() {
        // Set the sync target right after the component is mounted.
        this.primaryRef.current.sync( this.secondaryRef.current.splide );
    }

如何在功能组件中实现相同的效果？ 到目前为止，我所拥有的归结为：

import React, { useState, useEffect, useRef } from 'react';

import { Splide } from '@splidejs/react-splide';
import Video from '@splidejs/splide-extension-video';
import '@splidejs/splide-extension-video/dist/css/splide-extension-video.min.css';
import '@splidejs/splide/dist/css/themes/splide-skyblue.min.css';

export const About = () => {

const ids = [
    '1HygThMLzGs',
    'mAkjETPM1s4',
  ];

const SPLIDE_OPTIONS_show = {
    video: {
      autoplay: false,
      mute: false,
    },
  };

  const SPLIDE_OPTIONS_thumb = {
    video: {
      autoplay: false,
      mute: true,
    },
    isNavigation: true,
  };

  const Videos = ({ ids, big }) => (
    <>
      {ids.map((id, key) => (
        <li
          className="splide__slide"
          data-splide-youtube={`https://www.youtube.com/embed/${id}`}
          key={key}
        >
          <img
            src={
              `https://img.youtube.com/vi/${id}/` +
              (big ? 'hqdefault.jpg' : 'mqdefault.jpg')
            }
            alt="video thumbnail"
          />
        </li>
      ))}
    </>
  );

  const [state, setState] = useState({
    nav1: null,
    nav2: null,
  });

  const slider1 = useRef();
  const slider2 = useRef();

  useEffect(() => {
    setState({
      nav1: slider1.current,
      nav2: slider2.current,
    });
  }, []);

  const { nav1, nav2 } = state;

return (
<>
    <Splide
      ref={(slider) => (slider1.current = slider)}
      options={SPLIDE_OPTIONS_show}
      Extensions={{ Video }}
    >
      <Videos ids={ids} big={true} />
    </Splide>
    <Splide
      ref={(slider) => (slider2.current = slider)}
      options={SPLIDE_OPTIONS_thumb}
      Extensions={{ Video }}
    >
      <Videos ids={ids} big={false} />
    </Splide>
</>
  );
}

Answer 1

好的，想通了。在使用 useRef 声明滑块后，我需要在 useEffect 中调用该方法，不需要 useState：

import React, { useEffect, useRef } from 'react';

import { Splide } from '@splidejs/react-splide';
import Video from '@splidejs/splide-extension-video';
import '@splidejs/splide-extension-video/dist/css/splide-extension-video.min.css';
import '@splidejs/splide/dist/css/themes/splide-skyblue.min.css';

export const About = () => {

const ids = [
    '1HygThMLzGs',
    'mAkjETPM1s4',
  ];

const SPLIDE_OPTIONS_show = {
    video: {
      autoplay: false,
      mute: false,
    },
  };

  const SPLIDE_OPTIONS_thumb = {
    video: {
      autoplay: false,
      mute: true,
    },
    isNavigation: true,
  };

  const Videos = ({ ids, big }) => (
    <>
      {ids.map((id, key) => (
        <li
          className="splide__slide"
          data-splide-youtube={`https://www.youtube.com/embed/${id}`}
          key={key}
        >
          <img
            src={
              `https://img.youtube.com/vi/${id}/` +
              (big ? 'hqdefault.jpg' : 'mqdefault.jpg')
            }
            alt="video thumbnail"
          />
        </li>
      ))}
    </>
  );

  const slider1 = useRef();
  const slider2 = useRef();

useEffect(() => {
    slider1.current.sync(slider2.current.splide);
  }, [slider1, slider2]);

return (
<>
    <Splide
      ref={(slider) => (slider1.current = slider)}
      options={SPLIDE_OPTIONS_show}
      Extensions={{ Video }}
    >
      <Videos ids={ids} big={true} />
    </Splide>
    <Splide
      ref={(slider) => (slider2.current = slider)}
      options={SPLIDE_OPTIONS_thumb}
      Extensions={{ Video }}
    >
      <Videos ids={ids} big={false} />
    </Splide>
</>
  );
}