此组件起作用:
export class Template extends React.Component {
render() {
return (
<div> component </div>
);
}
};
export default Template;
如果我移除最后一行,就不起作用了。
Uncaught TypeError: Cannot read property 'toUpperCase' of undefined
我想,我不明白es6语法中的一些东西。它不是必须不带“default”符号导出吗?
导入和导出时添加{}:导出{...};
从“./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
不带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中,有两种导出: 命名出口 -例如,是名称为的命名出口。可以使用导入命名模块。在这种情况下,导入的名称应与导出的名称相同。