React Slick Syn c - функциональный компонент - PullRequest
Новая
       5

React Slick Syn c - функциональный компонент

0 голосов
/ 29 февраля 2020

У 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 = []

Ползунки отображаются, но не синхронизируются c, какие-либо мысли, входные данные, решения о том, как это работает?

1 Ответ

0 голосов
/ 13 апреля 2020

Я сделал это, и все заработало, как и ожидалось: 

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 передаются от родителя.

...