Reactjs 反应流畅：如何同步3个滑块

我正在使用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>

构造函数（道具）{
超级（道具）；
此.state={
nav1:null，
nav2:null，
nav3:null，
};
}
componentDidMount（）{
这是我的国家({
导航1:this.slider1，
导航2:this.slider2，
导航3：这个。幻灯片3，
});
}
（this.slider1=滑块）}
{…设置1}>。。。
（this.slider2=滑块）}
{…设置2}>。。。
（this.slider3=滑块）}
{…设置3}>。。。

谢谢，

这个“asNavFor”道具需要的是一个值，而不是一个值列表，因此在那里放置多个引用将不起作用

如果您将每个滑块指向下一个滑块，然后将最后一个点返回到第一个滑块，则似乎有效，如下所示：

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>

构造函数（道具）{
超级（道具）；
此.state={
nav1:null，
nav2:null，
nav3:null，
};
}
componentDidMount（）{
这是我的国家({
导航1:this.slider1，
导航2:this.slider2，
导航3：这个。幻灯片3，
});
}
（this.slider1=滑块）}
{…设置1}>。。。
（this.slider2=滑块）}
{…设置2}>。。。
（this.slider3=滑块）}
{…设置3}>。。。

---

作为旁注：我不知道这是官方支持的行为还是一个巧合，所以请谨慎使用。

它有效，但效果很差。当您快速单击滑块的箭头时，滑块相互混合-顺序丢失，因此无法显示所需内容。