web-dev-qa-db-ja.com

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

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

クラスを使用すると、これは機能します：

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

基本的なものが欠けていますか？

javascriptreactjsecmascript-6export
55
user6002037

ES6はexport default constを許可しません。最初に定数を宣言してからエクスポートする必要があります。

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

この制約は、禁止されているexport default a, b, c;の書き込みを避けるために存在します。デフォルトとしてエクスポートできる変数は1つだけです

104
Damien Leroux

補足として。最初に変数を宣言することなく、技術的にexport defaultを実行できます。

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

代入の代わりに関数宣言を使用することもできます。

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

この例では、すでに中括弧とreturnを使用しているため、妥協することなく、明らかにニーズと一致しています。

3
Cristian

あなたは2つの方法でそれを行うことができます

1）

// @flow

type ComponentAProps = {
  header: string
};

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

export default ComponentA;

2）

// @flow

type ComponentAProps = {
  header: string
};

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

defaultを使用する場合、次のようにインポートします

import ComponentA from '../shared/componentA'

defaultを使用しない場合は、次のようにインポートします

import { ComponentA } from '../shared/componentA'
1
sravan kumar ganji