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

Why es6 react component works only with "export default"?

提问by stkvtflw

This component does work:

这个组件确实有效：

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

If i remove last row, it doesn't work.

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

Uncaught TypeError: Cannot read property 'toUpperCase' of undefined

I guess, I don't understand something in es6 syntax. Isn't it have to export without sign "default"?

我想，我不明白 es6 语法中的某些东西。不是必须在没有符号“默认”的情况下导出吗？

回答by Jed Richards

Exporting without defaultmeans it's a "named export". You can have multiple named exports in a single file. So if you do this,

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

class Template {}
class AnotherTemplate {}

export { Template, AnotherTemplate }

then you have to import these exports using their exact names. So to use these components in another file you'd have to do,

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

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

Alternatively if you export as the defaultexport like this,

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

export default class Template {}

Then in another file you import the default export without using the {}, like this,

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

import Template from './components/templates'

There can only be one default export per file. In React it's a convention to export one component from a file, and to export it is as the default export.

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

You're free to rename the default export as you import it,

您可以在导入时自由重命名默认导出，

import TheTemplate from './components/templates'

And you can import default and named exports at the same time,

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

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

回答by Hasan Sefa Ozalp

Add { } while importing and exporting: export { ... };| import { ... } from './Template';

在导入和导出时添加 { }： export { ... };| import { ... } from './Template';

export→ import { ... } from './Template'

出口→import { ... } from './Template'

export default→ import ... from './Template'

导出默认→import ... from './Template'

---

---

Here is a working example:

这是一个工作示例：

// 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 />
    </>
  );
}

??Working sandbox to play around: https://codesandbox.io/s/export-import-example-react-jl839?fontsize=14&hidenavigation=1&theme=dark

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