使用 React/TypeScript 導入組件

Question

我想將測試組件導入主頁，但我不斷收到以下錯誤：

Module '"/.../src/components/Test"' has no default export. Did you mean to use 'import { Test } from "/.../src/components/Test"' instead?

在測試組件中，我在導出測試時不斷收到以下錯誤：

Type '({ name }: Props) => void' is not assignable to type 'FC<Props>'.
  Type 'void' is not assignable to type 'ReactElement<any, any> | null'

測試組件

import React,{FC} from 'react';

interface Props {
  name: string;
}
export const Test:FC<Props> = ({ name }: Props) => {
  <div>{name}</div>
};

主頁組件

import React from 'react';
import Test from './Test'

export const Home = () => {
  <div><Test name="example" /></div>
};

tsconfig.json

{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": ["src"]
}

Answer 1

您的代碼不正確。 該錯誤與 ES6 箭頭函數（或 ES 模塊）的工作方式有關。

所以請允許我解釋一下：您收到 TypeScript 錯誤，因為您的Test組件實際上並未return您正在創建的 JSX。

 export const Test:FC<Props> = ({ name }: Props) => ( <div>{name}</div> );

如果你用括號替換花括號，你的代碼可以正常工作。

此外，命名導出不等於default導出。 在您的示例中，您通過export const Test而不是default導出Test 。

由於您尚未導出默認值，因此import Test from './test.tsx'將不起作用。

我建議您閱讀 ES 模塊和ES6 箭頭函數。