JavaScript Export 2 Funktionen

Question

Ich benutze React, Redux und versuche nun, Material-UI einzubinden. Die Reduct- und Matrial-UI-Bibliotheken zeigen Beispielcode mit einem Export am Ende.

Redux:

export default connect(mapStateToProps, actions)(myComponent) 

Material UI:

export default withStyles(styles)(myComponent); 

Wenn ich beide Exporte bin versucht, zusammen zu bringen, muss ich die Standard loszuwerden. Also dachte ich, es wie dieses

aussehen soll Dies funktioniert nicht:

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

Fehler:

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

Das funktioniert nicht: Ich habe versucht, zu nennen die Funktion, aber dann wurde die Funktion nicht aufgerufen, aus einigen Gründen weiß ich nicht.

Ich weiß nicht, was passiert 'unter der Haube', so dass ich feststecke. Jede Hilfe ist willkommen :-)

EDIT Ich habe noch keine Lösung gefunden, aber ich habe das Problem gelöst. Ich teile die Komponente (myComponent) in eine extra Datei auf. Das Design ist besser so, jetzt unterscheidet es zwischen reinen Komponenten und Containern.

Answer 1

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

Dies ist kein gültiges Objekt; Du verpasst die Schlüssel.

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

Answer 2

Machen sie genannt Exporte:

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

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

Dann genannt Importe verwenden:

import {myConnect} from './yourscript'; 

Answer 3

Es gibt eine andere Lösung, die eine Menge Leute an einem Punkt benötigt HOC zu bauen (Higher Bestellkomponente). Ich werde vorschlagen, das Re-Compose-Dienstprogramm zu verwenden (wenn Sie ein anderes Paket zu Ihrem Projekt hinzufügen möchten). Hier ist ein link to great article darüber auf Medium.

Also, wenn ich hier Ihren Code zu schreiben wird, ist, wie ich HOC bauen schreiben:

import compose from 'recompose/compose'; 

    //...your component code here 

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