为什么 es6 react 组件仅适用于“导出默认值”？

小编典典

为什么 es6 react 组件仅适用于“导出默认值”？

all

该组件确实有效：

export class Template extends React.Component {
    render() {
        return (
            <div> component </div>
        );
    }
};
export default Template;

如果我删除最后一行，它不起作用。

Uncaught TypeError: Cannot read property 'toUpperCase' of undefined

我想，我不理解 es6 语法中的某些内容。不是必须在没有符号“默认”的情况下导出吗？

阅读 73

2022-05-10

共1个答案

小编典典

不带出口default意味着它是“命名出口”。您可以在一个文件中拥有多个命名导出。所以如果你这样做，

class Template {}
class AnotherTemplate {}

export { Template, AnotherTemplate }

那么您必须使用它们的确切名称导入这些导出。因此，要在另一个文件中使用这些组件，您必须这样做，

import {Template, AnotherTemplate} from './components/templates'

或者，如果您default像这样导出为导出，

export default class Template {}

然后在另一个文件中导入默认导出而不使用{}，就像这样，

import Template from './components/templates'

每个文件只能有一个默认导出。在 React 中，从文件中导出一个组件是一种约定，并将其导出为默认导出。

您可以在导入时随意重命名默认导出，

import TheTemplate from './components/templates'

您可以同时导入默认导出和命名导出，

import Template,{AnotherTemplate} from './components/templates'

2022-05-10