如何在React TypeScript(TSX)项目中使用JSX组件？实操遇阻求助

1. 调整文件扩展名或配置TypeScript识别JSX文件 #

• 最简方案：直接把你的JSX组件文件扩展名从.jsx改成.tsx，TSX完全兼容JSX语法，仅多了类型检查逻辑。
• 若不想修改扩展名：修改项目根目录的tsconfig.json，添加/调整以下配置项：

  {
    "compilerOptions": {
      "jsx": "react-jsx", // React 17+ 推荐使用该值，旧版本可设为"react"
      "allowJs": true,    // 允许项目引入JS/JSX格式文件
      "checkJs": false    // 可选：设为true会检查JS文件的类型合规性，新手可先关闭
    },
    "include": [
      "src/**/*.ts",
      "src/**/*.tsx",
      "src/**/*.js",
      "src/**/*.jsx"      // 让TypeScript识别项目中的JSX文件
    ]
  }
  

2. 给JSX组件补全类型（核心解决报错点） #

TSX项目会强制类型检查，纯JSX组件因缺少类型定义会触发报错，两种处理方式：

方式一：将JSX组件转为TSX并添加类型接口 #

比如原JSX组件：

// Button.jsx
export default function Button({ text, onClick }) {
  return <button onClick={onClick}>{text}</button>;
}

转为TSX并添加类型：

// Button.tsx
interface ButtonProps {
  text: string;
  onClick?: () => void; // 可选属性添加?标记
}

export default function Button({ text, onClick }: ButtonProps) {
  return <button onClick={onClick}>{text}</button>;
}

方式二：给JSX组件添加JSDoc类型（保留.jsx扩展名） #

如果想维持.jsx扩展名，用JSDoc给组件props补充类型说明：

// Button.jsx
/**
 * @typedef {Object} ButtonProps
 * @property {string} text
 * @property {() => void} [onClick]
 * @param {ButtonProps} props
 */
export default function Button({ text, onClick }) {
  return <button onClick={onClick}>{text}</button>;
}

3. 导入和使用组件的注意事项 #

• 导入组件时，TSX文件中可直接导入.jsx或.tsx组件，无需添加扩展名（项目默认配置moduleResolution: "node"已支持该特性）：

  // App.tsx
  import Button from './Button'; // 无论组件是.jsx还是.tsx格式都能正常识别
  
  function App() {
    return <Button text="Mint NFT" onClick={() => console.log('Minting')} />;
  }
  

• 若遇到导出/导入不匹配的错误：检查组件是默认导出（export default）还是命名导出（export function Button），导入方式需与导出方式对应。

4. 针对hashlips NFT项目的额外提示 #

该项目使用Vite作为构建工具，默认配置已支持JS/JSX/TS/TSX文件，只要tsconfig.json配置正确，即可正常引入JSX组件。若仍报错：

• 重启Vite开发服务器，配置修改后需重启才能生效。
• 检查项目ESLint配置（若存在），是否限制了JSX文件的使用，调整.eslintrc中的对应规则。

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