JavaScript 导出 2 个函数答案

【问题标题】：JavaScript export 2 functionsJavaScript 导出 2 个函数
【发布时间】：2017-09-17 10:26:55
【问题描述】：

我正在使用 React、Redux，现在尝试包含 Material-UI。 Reduct 和 Matrial-UI 库显示了末尾有导出的示例代码。

Redux：

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) 拆分为一个额外的文件。设计是这样更好，现在它区分了纯组件和容器。

【问题讨论】：

标签： javascript export react-redux material-ui

【解决方案1】：

很多人需要另一种解决方案来构建 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);

【讨论】：

【解决方案2】：

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

这不是一个有效的对象；你丢了钥匙。

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

【讨论】：

虽然 OP 可以导出一个对象，但命名导出可能更有意义。

【解决方案3】：

将它们命名为导出：

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

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

然后使用命名导入：

import {myConnect} from './yourscript';

【讨论】：