Question

我正在尝试创建具有多个独立组件的组件库。最终目标是允许用户执行类似的操作

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

但是我什么都没做。

我当前的布局是

src
 -index.tsx
 -components
  -one
  -two

我的代码如下所示的示例：

One.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文件，然后从那里进行导入/导出。所有这些都获得了相同的结果，并返回undefined。

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

Answer 1

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

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/>

从React组件库多次导出

2 个答案: