TSX 文件无法呈现导入的 React 组件

Question

当我将 Day 组件导入 Week 组件时（均为 .tsx 文件），出现以下错误：

未捕获错误：元素类型无效：应为字符串（对于内置组件）或 class/function（对于复合组件）但得到：对象。

检查 Week

的渲染方法

Day.tsx :

import React from 'react';




export default function Day () {
    return (
        <div>
            I am day
        </div>
    )
}

Week.tsx

import React from 'react';

import Day from './Day'


export default function Week () {
    return (
        <div>
            I am Week

            <Day />
        </div>
    )
}

如果我从周组件中删除日，我可以在屏幕上看到周组件。如果我将 Day.tsx 文件重命名为 Day.jsx，问题就会得到解决。它只发生在打字稿上。我也尝试过不同的导入约定。

有什么想法吗？

Answer 1

将此添加到您的 tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "noFallthroughCasesInSwitch": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src",
  ]
}

如果你也在使用 webpack，这将解决问题

module.exports = {
    //Rest of your code
    resolve: {
        extensions: ['.ts', '.tsx'],
    },
};

TSX 文件无法呈现导入的 React 组件

TSX file can't render imported React Component

javascript

jsx

typescript

reactjs