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

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

，因此这显然与您的需求相匹配，没有任何妥协。

Answer 5

不支持

export default const

。

你可以做这样的事情

import React, { Component } from 'react';

class Header extends Component {
    render(){
        return <pre>Header</pre>
    }
}

export default Header;