React项目中Swiper脚本标签无法识别JavaScript问题求助

问题根源 #

你在React组件的JSX里直接内嵌<script>标签写初始化代码的方式完全错误：

• JSX解析器不会把script标签内的内容当成JavaScript执行，反而会将其视为普通文本节点，直接导致语法高亮失效、冒号处报语法错误。
• 你已经通过import Swiper from 'swiper'引入了Swiper库，再引入CDN的swiper-bundle.min.js属于重复加载，会引发库版本冲突。

正确实现方式 #

改用React的useRef获取DOM节点，配合useEffect在组件挂载完成后初始化Swiper：

1. 导入React的useRef和useEffect钩子
2. 移除JSX中的两个<script>标签
3. 用useRef绑定swiper容器元素
4. 在useEffect中执行Swiper初始化逻辑

修正后的完整代码 #

import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination'; // 补充导入分页组件样式
import Swiper from 'swiper';
import { useRef, useEffect } from 'react';

export const Page = () => {
    const swiperRef = useRef(null);

    useEffect(() => {
        // 确保DOM节点存在后初始化Swiper
        if (swiperRef.current) {
            new Swiper(swiperRef.current, {
                loop: true,
                pagination: { el: '.swiper-pagination' },
                navigation: { 
                    nextEl: '.swiper-button-next', 
                    prevEl: '.swiper-button-prev' 
                }
            });
        }

        // 组件卸载时销毁Swiper实例，避免内存泄漏
        return () => {
            if (swiperRef.current?.swiper) {
                swiperRef.current.swiper.destroy();
            }
        };
    }, []); // 空依赖数组确保只在组件挂载时执行一次

    return (
        <div className="Container">
            <main className="MainContent">
                {/* 用ref绑定swiper容器 */}
                <div className="swiper" ref={swiperRef}>
                    <div className="swiper-wrapper">
                        <div className="swiper-slide"><img className="SlideImg" src={a}/></div>
                        <div className="swiper-slide"><img className="SlideImg" src={b}/></div>
                        <div className="swiper-slide"><img className="SlideImg" src={c}/></div>
                    </div>
                    <div className="swiper-pagination"></div>
                    <div className="swiper-button-prev"></div>
                    <div className="swiper-button-next"></div>
                </div>
            </main>
        </div>
    )
}

额外提示 #

• 必须导入分页组件对应的样式文件，否则分页器只会显示无样式的原始结构
• 组件卸载时销毁Swiper实例，可避免长期运行后的内存泄漏问题
• 确保图片变量a、b、c已正确导入本地资源或配置了有效URL

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