当前位置: 首页 > 知识库问答 >
问题:

为什么es6 react组件只在“导出默认”下工作?

班浩皛
2023-03-14

此组件起作用:

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

如果我移除最后一行,就不起作用了。

Uncaught TypeError: Cannot read property 'toUpperCase' of undefined

我想,我不明白es6语法中的一些东西。它不是必须不带“default”符号导出吗?

共有2个答案

缪志新
2023-03-14

导入和导出时添加{}:导出{...};从“./template”导入{...};

导出从“./template”导入{...}

导出默认导入...从“./template”

下面是一个工作示例:

// ExportExample.js
import React from "react";

function DefaultExport() {
  return "This is the default export";
}

function Export1() {
  return "Export without default 1";
}

function Export2() {
  return "Export without default 2";
}

export default DefaultExport;
export { Export1, Export2 };
// App.js
import React from "react";
import DefaultExport, { Export1, Export2 } from "./ExportExample";

export default function App() {
  return (
    <>
      <strong>
        <DefaultExport />
      </strong>
      <br />
      <Export1 />
      <br />
      <Export2 />
    </>
  );
}

⚡工作沙盒:https://codesandbox.io/s/export-import-example-react-jl839?fontsize=14&hidenavigation=1&theme=dark

孟海
2023-03-14

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

class Template {}
class AnotherTemplate {}

export { Template, AnotherTemplate }

然后您必须使用它们的确切名称导入这些导出。因此要在另一个文件中使用这些组件,

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

或者,如果以默认导出方式导出,

export default class Template {}

然后在另一个文件中导入默认导出而不使用{},如下所示,

import Template from './components/templates'

每个文件只能有一个默认导出。在React中,惯例是从文件中导出一个组件,并且导出它是默认的导出。

您可以在导入默认导出时重命名它,

import TheTemplate from './components/templates'

并且可以同时导入默认导出和命名导出,

import Template,{AnotherTemplate} from './components/templates'
 类似资料:
  • 该组件在以下情况下工作: 如果我删除最后一行,它将不起作用。 我想,我不明白es6语法中的一些东西。不是必须导出不带标志的“默认”吗?

  • 我想问最后一句是什么意思和做(导出默认的HelloWorld;),但我找不到关于它的任何教程。

  • 在的末尾,我们将 将声明为的默认导出。 然后当我们将这个文件导入到中时,我们简单地将 也以这种方式导入。 但是,中没有包含导出默认寄存器ServiceWorker语句。 我有两个问题- 这是如何工作,而没有一个语句中的? 而且还 为什么registerServiceWorker从一开始就没有大写?如本SO答案所述,它是内置组件吗? 以下是,供参考:

  • 问题内容: 档案:SafeString.js 我从未见过。是否有任何等效的东西更容易理解? 问题答案: 它是ES6模块系统的一部分,该文档中还有一个有用的示例: 如果模块定义了默认导出: 那么您可以通过省略花括号来导入默认导出: 更新: 自2015年6月,该模块系统中定义§15.2和在特定语法中定义§15.2.3ECMAScript的2015规范的。

  • 文件:safeString.js 我以前从未见过。对于,是否有更容易理解的等效内容?

  • 问题内容: 我想问一下最后一句话的意思和作用(导出默认的HelloWorld;),但是我找不到关于它的任何教程。 问题答案: 出口喜欢和进口,比如是一部分ES6模块系统。 模块是一个独立的单元,可以使用将资产暴露给其他模块,并使用来从其他模块获取资产。 在您的代码中: 在ES6中,有两种导出: 命名出口 -例如,是名称为的命名出口。可以使用导入命名模块。在这种情况下,导入的名称应与导出的名称相同。