Question

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

终极版：

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)

我不知道发生了什么＆＃39;引擎盖下＆＃39;所以我被卡住了。任何帮助表示赞赏： - ）

EDIT 我还没有找到解决方案，但我解决了这个问题。我将组件（myComponent）拆分为一个额外的文件。设计就是这样的事件，现在它区分了纯粹的组件和容器。

Answer 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);

Answer 2

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

这不是一个有效的对象;你错过了钥匙。

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

Answer 3

将它们命名为exports：

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

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

然后使用命名导入：

import {myConnect} from './yourscript';

JavaScript导出2个函数

3 个答案: