React-Swiper未随父组件重渲染问题求助

问题背景 #

父组件WorkSpace在Redux的workSpace.edit状态切换时会重渲染，但子组件Swiper的touchRatio配置（edit为true时设为0以禁止滑动）未生效，滑动功能仍可使用。尝试通过useEffect获取DOM中的Swiper实例调用update()方法，也没有效果。

原始代码 #

function WorkSpace() {
    const dispatch = useDispatch();
    const edit = useSelector((state)=>(state.workSpace.edit));
    const currentMode = useSelector((state)=>(state.workSpace.currentMode));

    useEffect(()=>{
        const swiper = document.querySelector('.swiper').swiper;
        swiper.update();
    }, [edit])

    return(
        <div id="workWrapper">
            <Swiper
                style={{width:"100vw"}}
                slidesPerView={1}
                initialSlide={currentMode}
                onRealIndexChange={(swiper)=>{
                    switch(swiper.realIndex)
                    {
                        case 0:
                            dispatch(changeMode(mode.TODO));
                            break;
                        case 1:
                            dispatch(changeMode(mode.DIARY));
                            break;
                        case 2:
                            dispatch(changeMode(mode.GOAL));
                            break;
                    }
                }}
                onSwiper={(swiper) => console.log(swiper)}
                touchRatio={edit?0:1}
                loop={true}
            >
                <SwiperSlide><ToDoList/></SwiperSlide>
                <SwiperSlide><Diary/></SwiperSlide>
                <SwiperSlide><ToMyGoal/></SwiperSlide>
            </Swiper>
        </div>
    );
}

解决方案 #

方案1：直接操作Swiper实例控制滑动（推荐） #

通过useRef保存Swiper实例，在edit状态变化时直接修改实例的allowTouchMove属性，这是最直接且性能最优的方式：

function WorkSpace() {
    const dispatch = useDispatch();
    const edit = useSelector((state)=>(state.workSpace.edit));
    const currentMode = useSelector((state)=>(state.workSpace.currentMode));
    const swiperRef = useRef(null); // 新增ref存储Swiper实例

    useEffect(()=>{
        if(swiperRef.current) {
            // 直接设置是否允许触摸滑动
            swiperRef.current.swiper.allowTouchMove = !edit;
        }
    }, [edit])

    return(
        <div id="workWrapper">
            <Swiper
                ref={swiperRef} // 绑定ref到Swiper组件
                style={{width:"100vw"}}
                slidesPerView={1}
                initialSlide={currentMode}
                onRealIndexChange={(swiper)=>{
                    switch(swiper.realIndex)
                    {
                        case 0:
                            dispatch(changeMode(mode.TODO));
                            break;
                        case 1:
                            dispatch(changeMode(mode.DIARY));
                            break;
                        case 2:
                            dispatch(changeMode(mode.GOAL));
                            break;
                    }
                }}
                onSwiper={(swiper) => console.log(swiper)}
                touchRatio={edit?0:1}
                loop={true}
            >
                <SwiperSlide><ToDoList/></SwiperSlide>
                <SwiperSlide><Diary/></SwiperSlide>
                <SwiperSlide><ToMyGoal/></SwiperSlide>
            </Swiper>
        </div>
    );
}

方案2：通过key强制Swiper重新渲染 #

给Swiper组件添加随edit变化的key，当状态切换时，React会销毁旧的Swiper实例并创建新的，确保配置生效：

<Swiper
    key={`swiper-${edit}`} // edit变化时触发组件重新初始化
    style={{width:"100vw"}}
    slidesPerView={1}
    initialSlide={currentMode}
    onRealIndexChange={(swiper)=>{
        // 原有逻辑保持不变
    }}
    onSwiper={(swiper) => console.log(swiper)}
    touchRatio={edit?0:1}
    loop={true}
>
    <SwiperSlide><ToDoList/></SwiperSlide>
    <SwiperSlide><Diary/></SwiperSlide>
    <SwiperSlide><ToMyGoal/></SwiperSlide>
</Swiper>

注意：此方法会重新初始化Swiper，可能带来性能开销，适合简单场景。

方案3：修改实例参数后更新配置 #

如果方案1无效，可尝试直接修改Swiper实例的配置参数后调用update()：

function WorkSpace() {
    const dispatch = useDispatch();
    const edit = useSelector((state)=>(state.workSpace.edit));
    const currentMode = useSelector((state)=>(state.workSpace.currentMode));
    const swiperRef = useRef(null);

    useEffect(()=>{
        if(swiperRef.current) {
            const swiper = swiperRef.current.swiper;
            // 更新touchRatio参数
            swiper.params.touchRatio = edit ? 0 : 1;
            swiper.update(); // 触发Swiper更新
        }
    }, [edit])

    return(
        <div id="workWrapper">
            <Swiper
                ref={swiperRef}
                // 其他配置保持不变
            >
                {/* slides */}
            </Swiper>
        </div>
    );
}

内容的提问来源于stack exchange，提问作者things_eight