从 React 组件库多次导出

Question

我正在尝试创建一个具有多个独立组件的组件库。最终目标是允许用户做类似的事情

import One from 'component-library' 
import Two from 'component-library'
<One/>
<Two/>

但我一直无法得到任何工作。

我目前的布局是

src
 -index.tsx
 -components
  -one
  -two

我的代码示例如下：

一.tsx

export default class One {
 ...
}

然后在我的根 index.tsx

import {default as One} from './components/one/One.tsx'
import {default as Two} from './components/two/Two.tsx'

export {
  one,
  two
}

然而，这不起作用并在尝试导入时返回 undefined ，如上所示。然而，我只使用一个组件export {default} from './components/one/One.tsx'就可以让它工作，或者只是这样做import One from '.components/one/One.Tsx'，我认为我的构建过程应该没问题。在这种情况下，组件在我的其他项目中正确显示。

我还尝试修改我的结构以及我的导入方式，例如在每个组件中使用 index.tsx 文件并从那里导出/导入。所有这些都得到了相同的结果，返回未定义。

如何正确导出这些文件，以便每个文件都可以在 3rd 方项目中单独导入？

Answer 1

与 Highlander 一样，给定模块只能有一个默认导出。您可以通过导入不同的模块来获得所需的导入：

import One from 'component-library/One';
import Two from 'component-library/Two';

或者，您可以使用命名导出和导入：

import { One, Two } from 'component-library';

但是您不能让相同的导入根据导入名称返回两个不同的东西。