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

Question

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

如果我使用类这有效：

 import React, { Component } from 'react';

export default class Header extends Component {
    render(){
        return <pre>Header</pre>
    }
}

但是，如果我使用纯函数，我将无法正常工作。

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

我错过了一些基本的东西吗？

原文由 user6002037 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

ES6 不允许 export default const 。您必须先声明常量，然后再将其导出：

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

存在此约束是为了避免 export default a, b, c; 是被禁止的：默认情况下只能导出一个变量

原文由 Damien Leroux 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

就像旁注一样。从技术上讲，您可以 export default 无需先声明变量。

 export default () => (
  <pre>Header</pre>
)

原文由 cheersjosh 发布，翻译遵循 CC BY-SA 3.0 许可协议