JavaScript導出2函數

我正在使用React，Redux，現在嘗試包含Material-UI。 Reduct和Matrial-UI庫顯示示例代碼，最後有一個導出。JavaScript導出2函數

終極版：

export default connect(mapStateToProps, actions)(myComponent)

材料的UI：

export default withStyles(styles)(myComponent);

當我試圖把兩者出口合計，我已經擺脫了默認。因此，我認爲它應該是這樣的

這不起作用：

export { 
    connect(mapStateToProps, actions)(myComponent), 
    withStyles(styles)(myComponent) 
}

錯誤：

"Syntax error: Unexpected token, expected , (120:15) 
     export {connect(mapStateToProps, actions)(myComponent)} 
        ^

這不起作用： 我試圖名該函數，但然後函數沒有被調用，由於某些原因，我不知道。

import * as myConnect from 'react-redux' 
... 
export const connect = myConnect.connect(mapStateToProps, actions)(View)

我不知道'引擎蓋下'發生了什麼，所以我卡住了。任何幫助表示讚賞:-)

編輯我還沒有找到解決方案，但我解決了這個問題。我將組件（myComponent）拆分爲一個額外的文件。設計更像這樣的事件，現在它區分純粹的組件和容器。

來源

2017-09-17 stackovermat

{ 
    connect(mapStateToProps, actions)(myComponent), 
    withStyles(styles)(myComponent) 
}

這不是一個有效的對象;你錯過了鑰匙。

{ 
    myConnectedComponent: connect(mapStateToProps, actions)(myComponent), 
    myStyledComponent: withStyles(styles)(myComponent) 
}

來源

2017-09-17 10:31:10

雖然OP *可能*導出對象，命名爲出口可能更有意義。 –

讓他們的名字命名出口：

export const myConnect = connect(mapStateToProps, actions)(myComponent); 

export const myStyles = withStyles(styles)(myComponent);

然後使用名爲進口：

import {myConnect} from './yourscript';

來源

2017-09-17 10:41:54

還有另一種解決方案，很多人都需要在一個點上建立HOC（高順序組件）。我會建議使用Recompose實用程序（如果您可以將其他軟件包添加到您的項目中）。這是關於它在中等的link to great article。

所以，如果我將在這裏寫你的代碼是怎麼會寫建立HOC：

import compose from 'recompose/compose'; 

    //...your component code here 

    export default compose(withStyles(styles), 
          connect(mapStateToProps, actions))(myComponent);

來源

2018-02-14 17:18:12 connect2Coder

JavaScript導出2函數

回答

相關問題