用 redux 反应原生 index.js

Question

我是 React 和 React native 的新手。

我有一个包含多个组件的文件夹，我已经能够创建一个 index.js 文件来导出文件夹内的所有组件，所以在其他组件中我可以这样做：

# /components/OneComponent.js
...
export { OneComponent }

# index.js
import { OneComponent } from './components'
```

现在我正在使用 Redux，我想完成同样的事情，但我不知道该怎么做。在我的组件中，我按如下方式导出组件：

# /component/OneComponent.js
export default connect(mapStateToProps, { myFunction})(OneComponent);

我猜应该是这样的

export { connect(mapStateToProps, { myFunction})(OneComponent) };

但它不能编译。

Answer 1

刚刚测试过了。

您可以通过将连接调用的结果分配给一个常量来解决您的错误，然后像这样导出该常量。

const comp1 = connect(mapStateToProps)(MyComponent);

export {comp1 as MyComponent};

Answer 2

从索引中导出组件时，您需要像这样导出它们：

export {connect(mapStateToPops,mapDispatchToProps)(ComponentName)}

然后在你的 index.js 中： export * from 'YourComponentRoute

请记住，如果您导出为默认值，您将导出一个唯一对象的实例。如果您导出 {}，则您正在导出对象的“副本”。

Answer 3

我不认为问题出在 Redux，import 和 export ES6 方法很混乱。例如：

• 示例 1（使用 export default）：

导出默认值时，不应使用 {}

## CORRECT
# /components/OneComponent.js
...
export default connect(mapStateToProps, { myFunction})(OneComponent);

# index.js
import AnyName from './components/OneComponent.js'

## WRONG
# /components/OneComponent.js
...
export default connect(mapStateToProps, { myFunction})(OneComponent);

# index.js
import { OneComponent } from './components/OneComponent.js'

• 示例 2（没有export default）：

尝试命名您的对象键

##CORRECT
# /components/OneComponent.js
...
export { OneComponent: connect(mapStateToProps, { myFunction})(OneComponent) };

# index.js
import { OneComponent } from './components'

##WRONG
# /components/OneComponent.js
...
export { connect(mapStateToProps, { myFunction})(OneComponent) };

# index.js
//It wont find the key OneComponent on exported object
import { OneComponent } from './components'