在TypeScript项目中无缝集成JSX组件：解决模块导入声明缺失问题

{
  "compilerOptions": {
    "target": "es2018",             // 目标JavaScript版本
    "lib": ["dom", "dom.iterable", "esnext"], // 包含的库文件
    "allowJs": true,                // 允许编译JavaScript文件
    "skipLibCheck": true,           // 跳过声明文件的类型检查
    "esModuleInterop": true,        // 允许CommonJS和ES模块之间的互操作
    "allowSyntheticDefaultImports": true, // 允许从没有默认导出的模块中合成默认导入
    "strict": true,                 // 启用所有严格类型检查选项
    "forceConsistentCasingInFileNames": true, // 强制文件名大小写一致
    "noFallthroughCasesInSwitch": true, // 禁止switch语句中出现穿透
    "module": "esnext",             // 模块化方案
    "moduleResolution": "node",     // 模块解析策略
    "resolveJsonModule": true,      // 允许导入.json文件
    "isolatedModules": true,        // 确保每个文件都可以安全地单独编译
    "noEmit": true,                 // 不生成输出文件（由构建工具处理）
    "jsx": "react-jsx",             // JSX工厂，根据你的React版本选择 "react" 或 "react-jsx"
    "baseUrl": "./",                // 用于解析非相对模块名称的基目录
    "paths": {                      // 路径映射，用于处理别名导入
      "@/*": ["src/*"]
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.js",
    "src/**/*.jsx" // 明确包含所有JSX文件
  ],
  "exclude": [
    "node_modules"
  ]
}

import React from 'react'; // 如果tsconfig.json中jsx设置为"react-jsx"，此行可选
import { Swiper, SwiperSlide } from "swiper/react";
import 'swiper/css';
// import { sliderSettings } from './common.js'; // 假设 common.js 存在并导出 sliderSettings
// import data from './slider.json'; // 假设 slider.json 存在

// 简化示例数据和设置
const sliderSettings = {}; // 实际项目中应有具体配置
const data = [
  { name: "Item 1", image: "https://via.placeholder.com/150", description: "Description 1" },
  { name: "Item 2", image: "https://via.placeholder.com/150", description: "Description 2" }
];

const Carousel = () => {
  return (
    <div className='p-[1.5rem] w-[100%] overflow-hidden relative'>
        <Swiper {...sliderSettings}>
            {
                data.map((card, i) => (
                    <SwiperSlide key={i}>
                        <div className='flex flex-col justify-center items-start gap-[0.6rem] p-4 rounded-[10px] max-w-[max-content] m-auto transition-all delay-300 ease-in'>
                            <img src={card.image} alt='samskaras'/>
                            <span>{card.name}</span>
                            <span>{card.description}</span>
                        </div>
                    </SwiperSlide>
                ))
            }
        </Swiper>
    </div>
  )
}

export default Carousel;

import HText from '@/shared/HText';
import { SelectedPage } from '@/shared/types'
import { motion } from 'framer-motion';
import Carousel from './Carousel'; // 从JSX文件导入Carousel组件

type Props = {
    setSelectedPage: (value: SelectedPage) => void;
}

const Samskaras = ({setSelectedPage}: Props) => {
  return (
    <section id='samskaras' className='w-full bg-primary-100 py-40'>
        <motion.div
            onViewportEnter={() => setSelectedPage(SelectedPage.Samskaras)}
        >
            <motion.div
                className='mx-auto w-5/6'
                initial="hidden" whileInView="visible" viewport={{ once: true, amount: 0.5 }} transition={{ duration: 0.5 }} variants={{ hidden: {opacity: 0, x: -50}, visible: {opacity: 1, x: 0}}}
            >
                <div className='md:w-3/5'>
                    <HText>
                        SAMSKARAS
                    </HText>
                    <p className='py-5'>
                        Fringilla a sed at suspendisse ut enim volutpat. Rhoncus vel est
                        tellus quam porttitor. Mauris velit euismod elementum arcu neque
                        facilisi. Amet semper tortor facilisis metus nibh. Rhoncus sit
                        enim mattis odio in risus nunc.
                    </p>
                </div>
            </motion.div>

            {/* 在TSX中使用导入的JSX组件 */}
            <Carousel />

        </motion.div>
    </section>
  )
}

export default Samskaras