React TypeScript中Swiper无法作为JSX组件使用的问题求助

问题根源 #

你当前代码存在两个核心错误：

• 错误导入Swiper：从swiper导入的是原生JS的Swiper类，并非React组件；React版本的Swiper组件需要从swiper/react导入。
• 错误使用原生初始化方式：直接new Swiper()是纯JS用法，React版本的Swiper通过组件props传递配置参数，无需手动实例化。

修复步骤 #

1. 修正导入语句
   将Swiper、SwiperSlide从swiper/react导入，同时按需导入样式文件：

   import { Swiper, SwiperSlide } from 'swiper/react';
   import { Pagination, Navigation } from 'swiper/modules';
   
   // 导入基础样式和对应模块样式
   import 'swiper/css';
   import 'swiper/css/pagination';
   import 'swiper/css/navigation';
   

2. 移除手动实例化代码
   删除这段原生方式的Swiper初始化代码：

   const swiper = new Swiper('.swiper', {
       modules: [Navigation, Pagination],
       direction: 'vertical',
       loop: true,
       pagination: {
           el: '.swiper-pagination',
       },
       navigation: {
           nextEl: '.swiper-button-next',
           prevEl: '.swiper-button-prev',
       },
   });
   

3. 通过组件props传递配置
   在JSX的<Swiper>组件上直接通过props传入配置参数，包括modules、方向、分页等设置。

4. 修正JSX语法错误
   移除<SwiperSlide>内部多余的括号，避免被解析为无效JSX表达式。

修改后的完整代码 #

import React from 'react';
import { IMarket } from '../interfaces/IMarket';
import { ISelection } from '../interfaces/ISelection';
import MultiDisplay from './MultiDisplay';
import SingleDisplay from './SingleDisplay';
import MarketStatusCover from './MarketStatusCover';

import { Swiper, SwiperSlide } from 'swiper/react';
import { Pagination, Navigation } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/navigation';

interface MarketProps {
    markets: IMarket[];
    marketTypeFilter: string;
}

function Market(props: MarketProps) {
    const { markets, marketTypeFilter } = props;
    console.log(markets);

    return (
        <>
            <Swiper
                modules={[Navigation, Pagination]}
                direction="vertical"
                loop={true}
                pagination={{
                    el: '.swiper-pagination',
                }}
                navigation={{
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                }}
            >
                {markets?.map((market: IMarket, index) => (
                    <SwiperSlide key={index}>
                        <MarketStatusCover status={market.marketStatus} description={market.marketStatusDescription} />
                        {index === 0 && <div className="text-center headerFontColour">{market.placeDescription}</div>}
                        {market.multiMarketOnOneScreen ?
                            <MultiDisplay selections={market.selections} />
                            :
                            <SingleDisplay selections={market.selections} />
                        }
                    </SwiperSlide>
                ))}
            </Swiper>
        </>
    );
}

export default Market;

额外注意事项 #

• 确保swiper与swiper/react版本一致，避免版本不兼容问题。
• 给遍历生成的<SwiperSlide>添加唯一key属性，符合React列表渲染规范。
• 用markets?.map替代markets && markets.map，可选链语法更简洁安全。

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