React项目集成SwiperJS滑动时无法正常显示下一张幻灯片问题求助

问题根因 #

• 错误将Swiper内部内置的swiper-wrapper类名赋值给了外层Swiper组件，打乱了Swiper自身的DOM结构样式逻辑
• Swiper父容器未设置明确宽高，Swiper无法获取正确的渲染尺寸
• 导入的Navigation、Pagination模块未注册到Swiper实例中（若不需要可直接删除对应导入）

修改方案 #

1. 调整JSX代码

import "./aboutus.scss"
import { init } from "ityped"
import { useEffect,useRef } from "react"
import {Swiper, SwiperSlide } from 'swiper/react'
import { Navigation, Pagination } from 'swiper';
import 'swiper/css'; 
import 'swiper/css/navigation';
import 'swiper/css/pagination';

export default function Aboutus() {
    const textRef = useRef();
    useEffect(()=> {
        init(textRef.current, { 
            showCursor: false,
            typeSpeed: 150, 
            strings: [' Boston.', ' Los Angeles.' ]
         })
    }, []);
    
    return (
        <div className="aboutus" id="aboutus">
            <div className="left">
                <div className="bio">
                        <div className="header">
                            <p >We are a K-POP Cover Dance Team in...</p>
                            <span ref={textRef} className="textref"> </span>
                        </div>
                </div>
            </div>
            <div className="right">
                <div className="swiper-container">
                    <Swiper
                        className="custom-swiper"
                        modules={[Navigation, Pagination]}
                        navigation={true}
                        pagination={{clickable: true}}
                        spaceBetween={10}
                        slidesPerView={3}
                        onSlideChange={() => console.log('slide change')}
                        onSwiper={(swiper) => console.log(swiper)}
                    >
                        <SwiperSlide>Slide 1</SwiperSlide>
                        <SwiperSlide>Slide 2</SwiperSlide>
                        <SwiperSlide>Slide 3</SwiperSlide>
                        <SwiperSlide>Slide 4</SwiperSlide>
                    </Swiper>
                </div>
            </div>     
        </div>
    )
}

2. 调整SCSS代码

.right{
    flex: 0.5;
    border: solid red;
    height: 90%;
    background-color: aqua;
    display: flex;
    justify-content: center;
    align-items: center;

    .swiper-container {
        width: 100%;
        height: 100%;
    }
    
    .custom-swiper{
        width: 100%;
        height: 100%;
        .swiper-slide{
            border: solid purple;
            height: 300px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}

修改后即可正常滑动显示所有幻灯片，Slide 3裁切、Slide 4无法显示的问题会同步解决。

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