这似乎是显而易见的,但我发现自己对于何时使用花括号在ES6中导入单个模块感到困惑.例如,在我正在处理的React-Native项目中,我有以下文件及其内容:
initialState.jsvar initialState = {
todo: {
todos: [
{id: 1, task: 'Finish Coding', completed: false},
{id: 2, task: 'Do Laundry', completed: false},
{id: 2, task: 'Shopping Groceries', completed: false},
]
}
};
export default initialState;
Run Code Online (Sandbox Code Playgroud)
在TodoReducer.js中,我必须在没有花括号的情况下导入它:
import initialState from './todoInitialState';
Run Code Online (Sandbox Code Playgroud)
如果我initialState用大括号括起来,我会得到以下代码行的错误:
TodoReducer.js:无法读取未定义的属性待办事项
export default function todos(state = initialState.todo, action) {
// ...
}
Run Code Online (Sandbox Code Playgroud)
使用花括号的组件也会发生类似的错误.我想知道何时应该使用大括号进行单次导入,因为很明显,当导入多个组件/模块时,你必须将它们用大括号括起来,我知道.
编辑:
所谓张贴在这里并没有回答我的问题,而不是我问的时候我应不应该用花括号用于导入单个模块,或者我不应该用花括号中ES6导入单个模块(这显然不是例如,我已经看过需要花括号的单个导入)
所以我有这些文件和文件夹.
App.js
modules/
user/
index.js
list.js
Run Code Online (Sandbox Code Playgroud)
在list.js我有 export default (props) => (...)
在index.js我有 export UserList from './list';
在App.js我有 import { UserList } from './modules/user';
那里有什么不对吗?因为我得到了
./src/modules/user/index.js
Syntax error: Unexpected token, expected { (1:7)
> 1 | export UserList from './list';
Run Code Online (Sandbox Code Playgroud)
但我不明白这里有什么问题?救命!
编辑:这里是我的list.js文件的更多细节,但我不认为它有所不同,因为错误在index.js中
import React from 'react';
// more import
export default (props) => (
<List {...props}>
...
</List>
);
Run Code Online (Sandbox Code Playgroud) 我仍然对react + redux和ES6感兴趣.我正在尝试实现socketio,我遇到了必须导出socketio连接我的redux连接的问题.
redux连接
export default connect(mapStateToProps, matchDispatchToProps)(UserList);
Run Code Online (Sandbox Code Playgroud)
socketio连接
export default socketConnect(App);
Run Code Online (Sandbox Code Playgroud)
问题 使它们一起工作的正确语法是什么?
我正在使用react native和redux,这是我的操作:
import EMPLOYEE_UPDATE from './types';
export const employeeUpdate = ({ prop, value }) => {
return (
{
type: EMPLOYEE_UPDATE,
paylaod: { prop, value }
}
);
};
Run Code Online (Sandbox Code Playgroud)
但我得到这个错误:
Actions may not have an undefined "type" property. Have you misspelled a constant?
Run Code Online (Sandbox Code Playgroud)
编辑:types.js文件是:
export const LOGIN_USER_FAILED = 'loing_user_failed';
export const SHOW_SPINNER = 'show_spinner';
export const EMPLOYEE_UPDATE = 'employee_update';
Run Code Online (Sandbox Code Playgroud) [解决]查看我的答案
我正在通过youtube播放列表https://www.youtube.com/watch?v=TO6akRGXhx8学习MERN Stack 。当我到达28:04时,我陷入了困境,他忘了用“ react-redux”连接他的组件。我遵循了他的解决方法,但是很好,由于某种原因,我的似乎没有联系。没有道具传递给我的ItemModal组件。因此,我花了3个小时进行调试,最后得出结论:只有将js命名为ShippingList时,connect()才能起作用,这很奇怪。当我将ShippingList重命名为另一个名称并更新引用时,它不再起作用。 ..请参阅下面的一些代码段
我认为我在创建它时不需要在商店中标识一个组件。
想知道你们是否可以复制它,请找到我的仓库 https://github.com/AmeDin/mern
ShoppingList.js
import React, { Component } from 'react'
import { connect } from 'react-redux'
export class ShoppingList extends Component {
render() {
console.log(this.props)
console.log(this.state)
//const { items } = this.props.item;
return (
<div>
</div>
)
}
}
const mapStateToProps = (state) => ({
item: state.item
})
export default connect()(ShoppingList);
Run Code Online (Sandbox Code Playgroud)
ShoppingListOne.js
import React, { Component } from 'react'
import { connect } from 'react-redux';
export class ShoppingListOne extends Component { …Run Code Online (Sandbox Code Playgroud)