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

我錯過了一些基本的東西嗎？

Answer 1

ES6 不允許export default const 。 您必須先聲明常量然后導出它：

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

存在此約束是為了避免寫入export default a, b, c; 這是被禁止的：默認只能導出一個變量

Answer 2

只是作為一個旁注。 從技術上講，您可以在不先聲明變量的export default下export default 。

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

Answer 3

你可以通過兩種方式做到這一點

 const ComponentA = props => { return <div>{props.header}</div>; }; export default ComponentA;

2)

 export const ComponentA = props => { return <div>{props.header}</div>; };

如果我們使用default我們會像這樣導入

import ComponentA from '../shared/componentA'

如果我們不使用default我們會像這樣導入

import { ComponentA } from '../shared/componentA'

Answer 4

您還可以使用函數聲明而不是賦值：

export default function Header() {
    return <pre>Header</pre>
}

在您的示例中，您已經使用了大括號並return因此這顯然符合您的需求，毫不妥協。