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

时间:2017-01-17 10:52:00

标签: javascript reactjs ecmascript-6 export

如何导出无状态纯哑组件?

如果我使用课程,这有效:

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

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

5 个答案:

答案 0 :(得分:99)

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

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

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

答案 1 :(得分:26)

正如旁注。您可以在技术上export default而不先声明变量。

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

答案 2 :(得分:3)

您还可以使用函数声明而不是赋值:

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

在您的示例中,您已经使用了大括号和return,因此这显然与您的需求相匹配而且没有任何妥协。

答案 3 :(得分:1)

你可以用两种方式做到这一点

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'

答案 4 :(得分:-2)

您还可以使用扩展PureComponent而不是Component的类。见这里:https://facebook.github.io/react/docs/react-api.html#react.purecomponent