React-slick：如何同步 3 个滑块

Question

我正在使用 react-slick 滑块与 3 个滑块同步。使用 2 个滑块它可以正常工作，但是当我尝试使用 3 个带有 2 个参考的滑块时它不起作用。

constructor(props) {
    super(props);
    this.state = {
        nav1: null,
        nav2: null,
        nav3: null,
    };
}

componentDidMount() {
    this.setState({
        nav1: this.slider1,
        nav2: this.slider2,
        nav3: this.slider3,
    });
}

<Slider
       className="background-slider"
       asNavFor={this.state.nav2, this.state.nav3}
       ref={slider => (this.slider1 = slider)}
       {...settings1}> ...
</Slider>
<Slider
       className="content-slider"
       asNavFor={this.state.nav1, this.state.nav3}
       ref={slider => (this.slider2 = slider)}
       {...settings2}> ...
</Slider>
<Slider
       className="person-slider"
       asNavFor={this.state.nav2, this.state.nav1}
       ref={slider => (this.slider3 = slider)}
       {...settings3}> ...
</Slider>

谢谢

Answer 1

“asNavFor”属性需要一个值，而不是值列表，因此将多个 ref 放在那里是行不通的。

如果您改为让每个滑块指向下一个滑块，然后让最后一个点回到第一个滑块，这似乎可行，如下所示：

constructor(props) {
    super(props);
    this.state = {
        nav1: null,
        nav2: null,
        nav3: null,
    };
}

componentDidMount() {
    this.setState({
        nav1: this.slider1,
        nav2: this.slider2,
        nav3: this.slider3,
    });
}

<Slider
       className="background-slider"
       asNavFor={this.state.nav2}
       ref={slider => (this.slider1 = slider)}
       {...settings1}> ...
</Slider>
<Slider
       className="content-slider"
       asNavFor={this.state.nav3}
       ref={slider => (this.slider2 = slider)}
       {...settings2}> ...
</Slider>
<Slider
       className="person-slider"
       asNavFor={this.state.nav1}
       ref={slider => (this.slider3 = slider)}
       {...settings3}> ...
</Slider>

附带说明：我不知道这是官方支持的行为还是只是巧合，因此请谨慎使用。