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

JavaScript React.js

乐米亚

2020-03-16

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

如果我使用类，则可以：

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

我缺少基本的东西吗？

第1798篇《React-如何导出纯无状态组件》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共3个回答

小宇宙Tom路易 2020.03.16

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

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

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

小宇宙神乐Mandy 2020.03.16

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

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

Gil伽罗 2020.03.16

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

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

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android