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

Question

当我将 Day 组件导入 Week 组件时(都是 .tsx 文件)，出现以下错误:

Uncaught Error :元素类型无效:需要一个字符串(对于内置组件)或一个类/函数(对于复合组件)但得到:对象。

查看Week的render方法

Day.tsx:

import React from 'react';




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

周.tsx

import React from 'react';

import Day from './Day'


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

            <Day />
        </div>
    )
}

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

有什么想法吗？

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'],
    },
};