Блог

Я хочу импортировать тестовый компонент в Home, но я продолжаю получать следующую ошибку:

 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"]
}
 

Ваш код неверен. Ошибка связана с тем, как работают функции ES6 arrow (или модули ES).

Итак, позвольте мне объяснить: вы получаете ошибку TypeScript, потому что ваш Test компонент на самом деле не return использует JSX, который вы создаете.

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

Если бы вы заменили фигурные скобки на скобки в скобках, ваш код работал бы нормально.

Кроме того, именованный экспорт не равен default экспорту. В вашем примере вы экспортируете Test через export const Test , а не default через .

Поскольку вы не экспортировали значение по умолчанию, import Test from './test.tsx' оно не будет работать.

Я предлагаю вам ознакомиться с модулями ES и функциями ES6 arrow.