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

Question

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

如果我使用 class 这有效:

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>
}

我是否遗漏了一些基本的东西？

Answer 1

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

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

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