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

2020/10/10 14:01 · javascript ·  · 0评论

此组件确实起作用:

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

如果我删除最后一行,它将无法正常工作。

Uncaught TypeError: Cannot read property 'toUpperCase' of undefined

我想我不了解es6语法。是不是必须在没有符号“ default”的情况下导出?

毫无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'

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

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

导出默认import ... from './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

本文地址:http://javascript.askforanswer.com/weishenmees6-reactzujianjinshiyongyudaochumorenzhi.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!