reactjs - 从另一个组件更改光滑的 slider 幻灯片

Question

我有两个独立的组件。在组件 A 中我有一些链接，在组件 B 中有一个光滑的 slider 。如何使用组件 A 中的 Links onClick 事件更改幻灯片。

Answer 1

您需要在最近的公共(public)父组件中管理一个slideIndex 状态。

将 setSlideIndex 作为 prop 传递给 Links 组件以更新状态。状态被传递到 Slider 组件，并使用 react-slick 的 slickGoTo 函数通过 useEffect 更新轮播。

import React, { useState, useEffect, useRef } from "react";
import Carousel from "react-slick";
import "slick-carousel/slick/slick.css";

function Parent() {
  const [slideIndex, setSlideIndex] = useState(0);

  return (
    <>
      <Links onClick={setSlideIndex} />
      <Slider slideIndex={slideIndex} />
    </>
  );
}

function Links({ onClick }) {
  return (
    <ul>
      <li>
        <button onClick={() => onClick(0)}>Show Slide 1</button>
      </li>
      <li>
        <button onClick={() => onClick(1)}>Show Slide 2</button>
      </li>
      <li>
        <button onClick={() => onClick(2)}>Show Slide 3</button>
      </li>
      <li>
        <button onClick={() => onClick(3)}>Show Slide 4</button>
      </li>
    </ul>
  );
}

function Slider({ slideIndex }) {
  const slider = useRef();

  useEffect(() => {
    slider.current.slickGoTo(slideIndex);
  }, [slideIndex]);

  return (
    <Carousel ref={slider}>
      <div>Slide 1</div>
      <div>Slide 2</div>
      <div>Slide 3</div>
      <div>Slide 4</div>
    </Carousel>
  );
}
Slider.defaultProps = {
  slideIndex: 0
};