时间戳

首页 > 解决方案 > React TypeScript - 导出多个组件

reactjs - React TypeScript - 导出多个组件

问题描述

鉴于此文件夹结构：

├──components/
|  └─Elements/
|    └─Button/
|    └─Input/
|    └─index.ts
|  └─Home/
|    └─home.tsx

我想导出Button，Input所以我可以通过执行以下操作从主组件访问它们：

主页.tsx

import { Button, Input } from '@elements/'

我试过这个：

index.ts（在 Elements 文件夹中）

export { Button } from './Button/button';
export { Input } from './Input/input';

但它不起作用，我明白Cannot find module '@elements/' or its corresponding type declarations.了：即使你解析别名确实有效。

tsconfig.json

{
  "compilerOptions": {
    "outDir": "../public",
    "module": "esnext",
    "target": "es5",
    "lib": ["es6", "dom"],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "baseUrl": "./",
    "rootDir": "./",
    "typeRoots": ["./node_modules/@types", "./src/@types"],
    "paths": {
      "@src/*": ["src/*"],
      "@images/*": ["src/images/*"],
      "@styles/*": ["src/styles/*"],
      "@components/*": ["src/components/*"],
      "@elements/*": ["src/components/Elements/*"],
    },
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "importsNotUsedAsValues": "preserve"
  },
  "exclude": ["node_modules", "webpack"]
}

webpack.config.babel.js

...
resolve: {
  alias: [
    '@src': join(rootDir, '/src'),
    '@images': join(rootDir, '/src/images'),
    '@assets': join(rootDir, '/src/assets'),
    '@styles': join(rootDir, '/src/styles'),
    '@components': join(rootDir, '/src/components'),
    '@elements': join(rootDir, '/src/components/Elements')
  ]
  extensions: ['.tsx', '.ts', '.js', '.jsx']
},

标签： reactjstypescriptecmascript-6

解决方案

我发现解决方案是*从path声明中删除tsconfig.json

这个

"@elements/*": ["src/components/Elements/"]

而不是这个

"@elements/*": ["src/components/Elements/*"]

然后使用导入它

import { Button, Input } from '@elements/'

或者

"@elements": ["src/components/Elements"]

import { Button, Input } from '@elements'

推荐阅读