如何导出增强组件？

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'