为什么import操作在下面的react组件中工作?这是箭头函数的性质吗?(不考虑使用named-export / de

Question

为什么下面的反应有效?由于Hello.js组件中的函数名是Hello，但在导入Hello.js的主组件中没有提到，它是箭头函数的属性吗-(如果我使用普通函数而不是箭头函数，程序会显示错误)

Hello.js组件:

import React from 'react';
const Hello =() => <h1> HELLO <h1/>
export default Hello

Hello.js组件被导出/调用的位置

import React from 'react';
import MyComponent from './Hello'
class App extends React.Component{
render(){
return(
<div>
<MyComponent />
<div/>
);
}
}

Answer 1

这就是default export，您可以在导入它时随意命名该组件。

但是如果你使用named export。

,

export const something = 'something'

当您导入它时，您需要销毁相同的名称。

import { something } from 'file/path'

正如@Felix提到的，你可以给named export另一个名字(以防命名冲突)

,

import { something as somethingElse } from 'file/path'

获取更多资源。

指定导出和默认导出的区别