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 () => (
  <pre>Header</pre>
)

唯一的缺点是以这种方式导出的组件在chrome的React devtools中将显示为"Unknown". (24认同)
@DanielThompson你可以像这样导入它:`import YourComponent from'./ path/to/component'`用路径替换组件的实际路径.默认导出的导入名称可以是您想要的任何内容,我在此示例中选择了"YourComponent". (3认同)
你如何导入这样声明的函数？ (2认同)

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因此，这显然可以满足您的需求，并且毫不妥协。