相关疑难解决方法(0)

这似乎是显而易见的,但我发现自己对于何时使用花括号在ES6中导入单个模块感到困惑.例如,在我正在处理的React-Native项目中,我有以下文件及其内容:

var 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;

在TodoReducer.js中,我必须在没有花括号的情况下导入它:

import initialState from './todoInitialState';

如果我initialState用大括号括起来,我会得到以下代码行的错误:

无法读取未定义的属性待办事项

export default function todos(state = initialState.todo, action) {
// ...
}

使用花括号的组件也会发生类似的错误.我想知道何时应该使用大括号进行单次导入,因为很明显,当导入多个组件/模块时,你必须将它们用大括号括起来,我知道.

编辑:

所谓张贴在这里并没有回答我的问题,而不是我问的时候我应不应该用花括号用于导入单个模块,或者我不应该用花括号中ES6导入单个模块(这显然不是例如,我已经看过需要花括号的单个导入)

我遇到了一个使用以下语法导入库的javascript库:

import React, { Component, PropTypes } from 'react';

上述方法与以下方法有什么区别？

import React, Component, PropTypes from 'react';

作为初学者，我试图将默认的 React 登陆页面从 header.js 渲染到 index.js。请帮我解释一下我错在哪里 Index.js -

import React from 'react';
import ReactDOM from 'react-dom';
import './header.css';
import Header from './header';
import registerServiceWorker from './registerServiceWorker';

class App extends Component {
    render() {
      return (
        <Header />
      );
    }
  }

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

header.js -

import React from 'react';
import ReactDOM from 'react-dom';
import './header.css';
import registerServiceWorker from './registerServiceWorker';

class Header extends Component {
    render() {
      return (
        <div className="App">
          <header className="App-header">
            <h1 className="App-title">Welcome to React</h1>
          </header>
          <p className="App-intro"> …

谁能向我解释为什么

import { React } from 'react';

打破一切，但

import React from 'react';

工作正常吗？他们说的不是同一件事吗？我试图在文档和互联网的其他地方找到答案，但我无法弄清楚。我觉得可能跟 Babel 有关系吧？

如果有帮助，这是我的 npm 包：

"dependencies": {
    "moment": "^2.18.1",
    "prop-types": "^15.5.10",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-router-dom": "^4.0.0",
    "styled-jsx": "^3.2.1",
    "uuid": "^3.2.1"
  },
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "eslint": "^4.13.1",
    "eslint-loader": "^1.9.0",
    "eslint-plugin-react": "^7.5.1",
    "file-loader": "^1.1.6",
    "html-webpack-plugin": "^2.29.0",
    "react-hot-loader": "^3.0.0-beta.7",
    "url-loader": "^0.6.2",
    "webpack": "^3.4.0",
    "webpack-dev-server": "^2.5.0"
}