在React组件中导出声明或表达式。 导出方式之间的区别

Question

我有一个反应成分。 如下代码

import React from 'react';
export const Header=()=>{

        return(
            <div>this test</div>
        );
}

这项工作正常。

但是，如果我使用下面的代码，它将给我错误，预期导出声明或表达式。

import React from 'react';
const Header=()=>{

        return(
            <div>this test</div>
        );
 }

export  Header;

可以解释一下这两种出口之间的区别。 提前致谢。

Answer 1

如果要命名导出，则需要

export  { Header };

要么

export  { Header as Smth };

文件

导出{name1，name2，…，nameN};

导出{variable1作为name1，variable2作为name2，…，nameN};

导出let name1，name2，…，nameN; //还有var，函数

export let name1 =…，name2 =…，…，nameN； //还有var，const

export name只是无效的语法。

Answer 2

您可以使用

export default Header

使第二个工作。 然后，您可以通过以下方式从另一个文件导入它

import Header from './Header'

甚至

import InsertAnythingHere from './Header'

假设文件的相对路径是./Header.js 。