这似乎是显而易见的,但我发现自己对于何时使用花括号在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导入单个模块(这显然不是例如,我已经看过需要花括号的单个导入)
我试图确定这两个之间是否存在任何重大差异,除了能够通过以下方式导入export default:
import myItem from 'myItem';
Run Code Online (Sandbox Code Playgroud)
使用export const我可以做:
import { myItem } from 'myItem';
Run Code Online (Sandbox Code Playgroud)
我想知道除此之外是否存在任何差异和/或用例.
比如说,我们正在使用React和ES6.我们将React和Component导入为
import React from 'react'
import { Component } from 'react'
Run Code Online (Sandbox Code Playgroud)
为什么语法不同?我们不能按照下面的规定使用吗?
import Component from 'react'
Run Code Online (Sandbox Code Playgroud) 我刚刚在本地做出反应,在那里我看到不断扩展两个类项目React.Component和Component本身.
例子:
class SomeView extends React.Component
要么
class OtherView extends Component
在我们两个都进口 React, {Component} from React
有没有实际的区别,如果是的话,哪一个?没有在网上找到任何信息.干杯!
我有:
const { state: { mode } } = this
console.log(mode) //'mode'
console.log(state) //undefined
Run Code Online (Sandbox Code Playgroud)
我也想声明state变量.
有没有办法在不将其分成两个陈述的情况下对其进行解构?
const { state } = this
const { mode } = state
Run Code Online (Sandbox Code Playgroud) 作为初学者,我试图将默认的 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();
Run Code Online (Sandbox Code Playgroud)
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"> …Run Code Online (Sandbox Code Playgroud) 我已经看到了从ES6中的另一个模块导入代码的以下两个变体:
import {module} from "./Module"
Run Code Online (Sandbox Code Playgroud)
和
import module from "./Module"
Run Code Online (Sandbox Code Playgroud)
其中module是文件中定义的ES6类
Module.js
两个import语句有什么区别?
是不是ES6替换节点require()?我有以下代码:
var sprintf = require("sprintf-js").sprintf;
这与广告一样有效.我可以使用sprintf().我想使用ES6 import语句完成相同的操作:
import sprintf from 'sprintf-js';
这不起作用.为什么不?我该如何解决?如果您可以解释sprintf-js中的导出如何工作,则可以获得奖励积分.
javascript ×6
ecmascript-6 ×5
reactjs ×3
components ×1
es6-modules ×1
import ×1
node.js ×1
react-native ×1