1

我有一个包含多个组件的公共文件夹和一个如下所示的 index.js 文件：

export * from './Alert'
export * from './Button'
...

我这样做是为了可以像这样导入它们：

import { Alert, Button } from './common'

在每个（无状态）组件中，我都像这样导出组件：

export { Alert }

我现在正在创建一个增强的新组件：

import { branch, renderComponent } from 'recompose'
...

const Loading = () =>
  <Spinner size='large' />

const FormNextButton = ( { onPress } ) =>
  <Button
    onPress={ onPress }
    title="Next"
  />

const enhance = branch(
  ( { loading } ) => loading,
  renderComponent( Loading )
)

但是现在我不知道如何导出它，以便我可以在 index.js 中像其他组件一样使用它。我试过这个：

// #1
export { enhance( FormNextButton ) }

但它给了我一个语法错误：

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

我也试过这个：

// #2
const ExportVal = enhance( FormNextButton )
export { ExportVal }

但是当我尝试在另一个组件中引用它时，它给了我一个错误：

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

Check the render method of `SomeComponent`.

如何以类似于导出其他组件的方式导出此组件？

4

1 回答 1

1

您需要按名称导出它：

// enhanced-button.js
export const EnhancedButton = enhance( FormNextButton )

// index.js
export * from './enhanced-button.js'
// ...

// import it in other module by name
import { EnhancedButton } from './common'
于 2017-08-11T21:24:33.020 回答