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

77

如何导出无状态的纯哑组件？

如果我使用类，则可以：

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

我缺少基本的东西吗？

— 达米安·勒鲁（Damien Leroux）
source

157

ES6不允许export default const。您必须先声明该常量，然后将其导出：

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

存在此约束以避免写export default a, b, c;被禁止：默认情况下只能导出一个变量

— 达米安·勒鲁（Damien Leroux）
source

43

只是作为旁注。从技术上讲，您export default无需先声明变量即可。

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

— Cheersjosh
source

31

唯一的缺点是，以这种方式导出的组件将出现Unknown在chrome的React devtools中。

— 希尔马克

1

如何导入这样声明的函数？

— 丹尼尔·汤普森

4

您可以这样输入@DanielThompson：import YourComponent from './path/to/component' 将路径替换为组件的实际路径。YourComponent在本示例中，我选择了默认导出的导入名称。

— cheersjosh

9

您还可以使用函数声明代替赋值：

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

在您的示例中，您已经使用了大括号，return因此，这显然可以满足您的需求，并且毫不妥协。

— 克里斯蒂安
source

在Typescript之前，这是我的首选方法。对于TS，（不幸的）返回const箭头函数方法来声明属性类型是有用的const MyComponent: React.FC<MyComponentProps> = () => {}。

— Trevor Robinson

@Trevor，一个真正的问题，我仍然在TS中迈出第一步：为什么不仅仅export default function MyComponent(props: MyComponentProps) {}使用它const MyComponent: React.FC<MyComponentProps> = () => {}？

— gmagno

@gmagno，如果您看一下FC / FunctionComponent的定义，您会发现它还为您做了一些其他工作：1）返回类型为ReactElement | null，2）添加children到属性中，3）将其他成员添加到FC中喜欢propTypes和defaultProps。

— 特雷弗·罗宾逊

7

你可以用两种方式做到

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'

— 斯拉文·甘吉
source