从另一个组件更改光滑的滑块幻灯片

Question

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

Answer 1

您需要在最近的公共父组件中管理slideIndex状态。

将setSlideIndex作为链接组件的道具传递以更新状态。状态将向下传递到 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
};