来自 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 文件并从那里导出/导入。所有这些都得到了相同的结果，返回未定义。

我怎样才能正确地导出这些，以便在第 3 方项目中单独导入每一个？

Answer 1

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

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

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

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

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

Answer 2

试试下面的代码：

import one from './components/one/One.tsx';
import two from './components/two/Two.tsx';

export const One = one;
export const Two = two;

然后你可以像下面这样使用它：

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

<One/>
<Two/>