TSX文件无法渲染已导入的React组件。

Question

当我将Day组件导入Week组件（两个都是.tsx文件）时，会出现以下错误：

未捕获的错误：元素类型无效：预期一个字符串（用于内置组件）或类/函数（用于复合组件），但得到了对象。

检查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”，我就能在屏幕上看到星期组件。 如果我将Day.tsx文件重命名为Day.jsx，问题就会得到解决。这只发生在使用TypeScript时。 我还尝试了不同的导入约定。

有任何想法吗？

- GodAceTheKid

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

- Evren

---

tsconfig.json 做到了！谢谢！ - GodAceTheKid