React - 如何导出纯无状态组件

如何导出无状态纯哑组件？

如果我使用类,这有效:

import React, { Component } from 'react';

export default class Header extends Component {
    render(){
        return 
Header
    }
}

但是,如果我使用纯函数,我无法使其工作.

import React, { Component } from 'react';
export default const Header = () => {
    return 
Header
}

我错过了什么基本的东西？

1> Damien Lerou..：

---

ES6不允许export default const.您必须先声明常量然后导出它:

const Header = () => {
  return 
Header
};
export default Header;

存在此约束以避免export default a, b, c;禁止写入:只能将一个变量导出为默认值

2> cheersjosh..：

---

就像旁注一样.从技术上讲,您可以export default先声明变量.

export default () => (
  
Header
)

---

唯一的缺点是以这种方式导出的组件在chrome的React devtools中将显示为"Unknown".

---

@DanielThompson你可以像这样导入它:`import YourComponent from'./ path/to/component'`用路径替换组件的实际路径.默认导出的导入名称可以是您想要的任何内容,我在此示例中选择了"YourComponent".

3> Cristian..：

---

您还可以使用函数声明代替赋值：

export default function Header() {
    return 
Header
}

在您的示例中，您已经使用了花括号，return因此，这显然可以满足您的需求，并且毫不妥协。