如何導出增強組件？

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'