Question

我的问题是这两种导入之间有什么区别。

import abc from ./utilities/fibo 和 import * as abc from ./utilities/fibo

我以为它们几乎相同，但事实证明出乎我的意料。

尽管我认为问题是平台不可知的，但这是用react native编写的。世博会版本27.1。

两个简单的js文件：

fibo.js：

export default "string";

app.js：

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import abc from './utilities/fibonacci';

debugger // set break point here

export default class App extends React.Component {
  render() {
    return (
      <Text>{abc}</Text>
    );
  }
}

您可以看到我在app.js中设置了断点。当我运行代码时，它会在断点处停止。然后，当我检查abc时，参考错误告诉我

abc未定义

但这完全可以在<Text>{abc}</Text>中使用，并且可以正确呈现。

如果我对导入的模块使用别名：

app.js：

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import * as abc from './utilities/fibonacci';

debugger // set break point here

export default class App extends React.Component {
  render() {
    return (
      <Text>{abc}</Text>
    );
  }
}

再次运行代码，遇到断点。对abc的检查告诉我，它已经被定义为一个对象，其属性名为“默认”，其值为“字符串”。

区别不仅仅就在这里。恢复运行代码，错误跳出：

不变违反：对象作为React子对象无效（找到：具有键{default}的对象）。如果要渲染子级集合，请改用数组。

我必须将<Text>{abc}</Text>更改为<Text>{abc.default}</Text>才能使事情发生。

那么，它们之间有什么区别？为什么呢？

ES6中的默认导入和别名导入有什么区别？

0 个答案: