如何导出增强组件？

Question

我有一个包含多个组件的公用文件夹和一个如下所示的 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`.

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

Answer 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'

如何导出增强组件？

How do I export an enhanced component?

higher-order-functions

reactjs

react-native

recompose