React - 純粋なステートレスコンポーネントをエクスポートする方法

Question

ステートレス純粋なDumbコンポーネントをエクスポートするにはどうすればよいですか？しかし

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;を足す避けるために存在します：1つの変数のみがデフォルト

Answer 2

としてエクスポートすることができます。また、代わりにPureComponentを拡張するクラスを使用することができますあなたは、一定の第1は、それをエクスポートする宣言する必要がありますコンポーネントのここをクリックしてください：https://facebook.github.io/react/docs/react-api.html#react.purecomponent

Answer 3

ちょっとしたメモです。あなたは技術的にはexport defaultに変数を最初に宣言することなくすることができます。

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

Answer 4

次の2つの方法

1）

// @flow 
 

 
type CompletedComponentProps = { 
 
    header: string 
 
}; 
 

 
const ComponentA = (props: ComponentAProps) => { 
 
    return <div>{props.header}</div>; 
 
}; 
 

 
export default ComponentA;

2）

// @flow 
 

 
type CompletedComponentProps = { 
 
    header: string 
 
}; 
 

 
export const ComponentA = (props: ComponentAProps) => { 
 
    return <div>{props.header}</div>; 
 
};

でそれを行うことができます

私たちはデフォルトを使用している場合、我々は、この

import ComponentA from '../shared/componentA' 

私たちはデフォルトを使用しない場合、我々は、この

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