0

React Slick 有很好的例子来说明如何让它运行，然而这个是在类组件中，任何关于如何在使其成为功能组件时修复它的想法

https://react-slick.neostack.com/docs/example/as-nav-for

import React from "react";
import Slider from "react-slick";

export default function SyncSlider() {
  const [nav1, setNav1] = React.useState(null)
  const [nav2, setNav2] = React.useState(null)
    let slider1 = []
    let slider2 = []

    React.useEffect(() => {
        setNav1(slider1)
        setNav2(slider2)
    }, [slider1, slider2])

    return (
      <div>
        <h2>Slider Syncing (AsNavFor)</h2>
        <h4>First Slider</h4>
        <Slider
          asNavFor={nav1}
          ref={slider => (slider1 = slider)}
        >
          <div>
            <h3>1</h3>
          </div>
          <div>
            <h3>2</h3>
          </div>
          <div>
            <h3>3</h3>
          </div>
          <div>
            <h3>4</h3>
          </div>
          <div>
            <h3>5</h3>
          </div>
          <div>
            <h3>6</h3>
          </div>
        </Slider>
        <h4>Second Slider</h4>
        <Slider
          asNavFor={nav2}
          ref={slider => (slider2 = slider)}
          slidesToShow={3}
          swipeToSlide={true}
          focusOnSelect={true}
        >
          <div>
            <h3>1</h3>
          </div>
          <div>
            <h3>2</h3>
          </div>
          <div>
            <h3>3</h3>
          </div>
          <div>
            <h3>4</h3>
          </div>
          <div>
            <h3>5</h3>
          </div>
          <div>
            <h3>6</h3>
          </div>
        </Slider>
      </div>
    );

}

问题看起来像在这里：

    let slider1 = []
    let slider2 = []

滑块显示但不同步，有什么想法、输入、解决方案让这个工作？

4

5 回答 5

8

简单实用的解决方案（没有 UseEffect 和 UseRef）：

import React, { useState } from 'react';
import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

export default function SyncSlider() {
  const [nav1, setNav1] = useState();
  const [nav2, setNav2] = useState();

    return (
    <div>
      <h2>Slider Syncing (AsNavFor)</h2>
      <h4>First Slider</h4>
      <Slider asNavFor={nav2} ref={(slider1) => setNav1(slider1)}>
        <div>
          <h3>1</h3>
        </div>
        <div>
          <h3>2</h3>
        </div>
        <div>
          <h3>3</h3>
        </div>
        <div>
          <h3>4</h3>
        </div>
        <div>
          <h3>5</h3>
        </div>
        <div>
          <h3>6</h3>
        </div>
      </Slider>
      <h4>Second Slider</h4>
      <Slider
        asNavFor={nav1}
        ref={(slider2) => setNav2(slider2)}
        slidesToShow={3}
        swipeToSlide={true}
        focusOnSelect={true}
      >
        <div>
          <h3>1</h3>
        </div>
        <div>
          <h3>2</h3>
        </div>
        <div>
          <h3>3</h3>
        </div>
        <div>
          <h3>4</h3>
        </div>
        <div>
          <h3>5</h3>
        </div>
        <div>
          <h3>6</h3>
        </div>
      </Slider>
    </div>
  );
}

演示： Stackblitz

于 2021-03-10T16:03:23.310 回答
2

我遇到了你的问题，现在它为我解决了，这段代码将 100% 工作：D

  1. 删除让滑块 1 和让滑块 2
  2. 你在 useEffect 中需要空的 dep
  3. setstates 中使用的 refs 未为滑块定义，因此您需要这样编写： setNav1(slider1.current) 和 setNav2(slider2.current)
  4. 滑块中的 refs 应该像这样 ref={slider1}

这是我的代码，对我来说仍然很完美

 export const ProductGallery = () => {
  const [nav1, setNav1] = useState(null);
  const [nav2, setNav2] = useState(null);
  const slider1 = useRef(null);
  const slider2 = useRef(null);

  useEffect(() => {
    setNav1(slider1.current);
    setNav2(slider2.current);
  }, []);

  return (
    <div style={{ width: "400px" }}>
      <div>
        <Slider asNavFor={nav2} ref={slider1}>
          <div>
            <h3>1</h3>
          </div>
          <div>
            <h3>2</h3>
          </div>
          <div>
            <h3>3</h3>
          </div>
          <div>
            <h3>4</h3>
          </div>
          <div>
            <h3>5</h3>
          </div>
          <div>
            <h3>6</h3>
          </div>
        </Slider>

        <h4>Pagination slider</h4>

        <Slider
          asNavFor={nav1}
          ref={slider2}
          slidesToShow={3}
          swipeToSlide={true}
          focusOnSelect={true}
        >
          <div>
            <h3>1</h3>
          </div>
          <div>
            <h3>2</h3>
          </div>
          <div>
            <h3>3</h3>
          </div>
          <div>
            <h3>4</h3>
          </div>
          <div>
            <h3>5</h3>
          </div>
          <div>
            <h3>6</h3>
          </div>
        </Slider>
      </div>
    </div>
  );
};
于 2020-12-16T13:05:24.143 回答
1

你几乎拥有它。要修复您的代码，请切换asNavFor属性 - 第一个滑块应该有asNavFor={nav2}，第二个滑块应该有asNavFor={nav1}。

import React from "react";
import Slider from "react-slick";

export default function SyncSlider() {
  const [nav1, setNav1] = React.useState(null)
  const [nav2, setNav2] = React.useState(null)
    let slider1 = []
    let slider2 = []

    React.useEffect(() => {
        setNav1(slider1)
        setNav2(slider2)
    }, [slider1, slider2])

    return (
      <div>
        <h2>Slider Syncing (AsNavFor)</h2>
        <h4>First Slider</h4>
        <Slider
          asNavFor={nav2}
          ref={slider => (slider1 = slider)}
        >
          <div>
            <h3>1</h3>
          </div>
          <div>
            <h3>2</h3>
          </div>
          <div>
            <h3>3</h3>
          </div>
          <div>
            <h3>4</h3>
          </div>
          <div>
            <h3>5</h3>
          </div>
          <div>
            <h3>6</h3>
          </div>
        </Slider>
        <h4>Second Slider</h4>
        <Slider
          asNavFor={nav1}
          ref={slider => (slider2 = slider)}
          slidesToShow={3}
          swipeToSlide={true}
          focusOnSelect={true}
        >
          <div>
            <h3>1</h3>
          </div>
          <div>
            <h3>2</h3>
          </div>
          <div>
            <h3>3</h3>
          </div>
          <div>
            <h3>4</h3>
          </div>
          <div>
            <h3>5</h3>
          </div>
          <div>
            <h3>6</h3>
          </div>
        </Slider>
      </div>
    );

}
于 2020-07-14T00:04:31.917 回答
0

我这样做了，它按预期工作：

const NavigationCarousel = props => {   

    const [topNav, setTopNav] = useState(null); 
    const [bottomNav, setBottomNav] = useState(null);

  let _topSlider = [],
    _bottomSlider = [];

  useEffect(() => {
    setTopNav(_topSlider);
    setBottomNav(_bottomSlider);   
}, [_topSlider, _bottomSlider]);

  return (
    <div className={styles.container}>
      <Slider
        asNavFor={bottomNav}

        ref={slider => {
          _topSlider = slider;
        }}
      >
        {topNavElements}
      </Slider>

      <Slider
        asNavFor={topNav}

        ref={slider => {
          _bottomSlider = slider;
        }}
        slidesToShow={slidesToShowBottomNav}
        swipeToSlide={true}
      >
        {bottomNavElements}
      </Slider>
    </div>   ); 
}
export default NavigationCarousel;

topNavElements并且bottomNavElements是从父母那里传入的。

于 2020-04-13T13:50:12.987 回答
0

@burgrandy 的答案可能会导致错误（例如在页面滚动时）

错误：超过最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，可能会发生这种情况。React 限制了嵌套更新的数量以防止无限循环。

@ali khakbazan 的回答有一个问题，即同步只在一个方向上起作用，因此只有第一个轮播会影响第二个，反之则不然。

此外，两者都回答了过于复杂的问题并使用了不必要的代码。

所以我建议使用更简单的代码，没有错误：

export default function SyncSlider() {
  const slider1 = useRef(null)
  const slider2 = useRef(null)

  return (
    <div>
      <h2>Slider Syncing (AsNavFor)</h2>
      <h4>First Slider</h4>
      <Slider
        asNavFor={slider2.current}
        ref={slider1}
      >
        {list1}
      </Slider>

      <h4>Second Slider</h4>
      <Slider
        asNavFor={slider1.current}
        ref={slider2}
      >
        {list2}
      </Slider>
    </div>
  );
}
于 2021-03-04T19:21:13.710 回答