无法在 react-slick

如何解决无法在 react-slick

我有一个组合使用两个滑块的组件（总共 4 个）。一种组合用于水平转盘，另一种组合用于垂直。此决定基于屏幕尺寸。

当它在较小的设备中呈现时，它工作正常，但在较大的屏幕上，它会呈现，但一旦我点击移动幻灯片的按钮，它就会崩溃并显示以下错误。

我使用 react-slick 作为轮播。

这是组件代码：

class Carousel extends Component {
   constructor(props) {
    super(props);
    this.state = {
        imageSlider: null,contentSlider: null,isMobile: true
    };

    this.getHorizontalSlider = this.getHorizontalSlider.bind(this);
    this.getVerticalSlider = this.getVerticalSlider.bind(this);
}

componentDidMount() {

    const isMobile = window.screen.width > 768 ? false : true;

    this.setState({
        imageSlider: this.slider1,contentSlider: this.slider2,isMobile: isMobile
    });
}

getHorizontalSlider() {
    return (
        <div className={this.props.className}>
            <Slider
                asNavFor={this.state.contentSlider}
                ref={slider => (this.slider1 = slider)}
                className={styles.horizontalImageSlider}
                focusOnSelect={false}
                arrows={false}
                dots={true}
                autoplay={true}
                autoplaySpeed={7000}
            >
                {
                    data.map((item,index) => (
                        <div key={index}>
                            <img src={item.imageUrl} className={`${styles.carouselImage} img-fluid mx-auto`} alt="" />
                        </div>
                    ))
                }
            </Slider>
            <Slider
                asNavFor={this.state.imageSlider}
                ref={slider => (this.slider2 = slider)}
                focusOnSelect={false}
                arrows={false}
            >
                {
                    data.map((item,index,arr) => (
                        <div key={index} className='text-center text-secondary'>
                            <h2 className="text-primary fw-bold mb-4">{item.heading}</h2>
                            <p className='lead px-2'>{item.description}</p>
                        </div>
                    ))
                }
            </Slider>
        </div>
    )
}


getVerticalSlider() {
    return (
        <div className={`row ${this.props.className}`}>
            <div className="col-4">
                <Slider
                    asNavFor={this.state.contentSlider}
                    ref={slider => (this.slider1 = slider)}
                    vertical={true}
                    arrows={false}
                    slidesToScroll={1}
                    verticalSwiping={false}
                    focusOnSelect={false}
                    slidesToShow={1}
                >
                    {
                        data.map((item,index) => (
                            <div key={index}>
                                <img src={item.imageUrl} className={`${styles.carouselImage} img-fluid mx-auto`} alt="" />
                            </div>
                        ))
                    }
                </Slider>
            </div>

            <div className="col-8">
                <div className='d-flex justify-content-center align-items-center h-100'>
                    <Slider
                        className={styles.verticalContentSlider}
                        asNavFor={this.state.imageSlider}
                        ref={slider => (this.slider2 = slider)}
                        slidesToScroll={1}
                        slidesToShow={1}
                        swipetoSlide={true}
                        focusOnSelect={true}
                        vertical={true}
                        adaptiveHeight={true}
                        nextArrow={<CustomArrow />}
                        prevArrow={<CustomArrow />}
                    >
                        {
                            data.map((item,arr) => (
                                <div key={index}>
                                    {getSlideContent(item,arr)}
                                </div>
                            ))
                        }
                    </Slider>
                </div>
            </div>
        </div>
    )
}

render() {

    if (this.state.isMobile === true) {
        return this.getHorizontalSlider();
    }

    return this.getVerticalSlider();
}

}

我知道这不是最好的代码，但我想先完成这项工作，然后再重构它。 感谢您阅读本文，非常感谢。

解决方法

看起来您的 setState() 只会在组件以移动默认设置安装后执行一次。这意味着当您的组件重新渲染以显示垂直滑块时，imageSlider 和 contentSlider 仍指向移动的水平滑块。这会导致 react-slick 在尝试解决您的 asNavFor 设置时抛出错误。

避免这种情况的一种方法可能是在构造函数中设置默认移动状态而不是 componentDidMount，这样只会呈现一组组件（水平或垂直）。

   constructor(props) {
     super(props);

     this.state = {
       imageSlider: null,contentSlider: null,isMobile: window.screen.width <= 768
     };

     ...

   }