Почему компонент es6 реагирует только на «экспорт по умолчанию»?

241

Этот компонент работает:

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

Если я удалю последнюю строку, это не сработает.

Uncaught TypeError: Cannot read property 'toUpperCase' of undefined

Наверное, я не понимаю что-то в синтаксисе es6. Разве не нужно экспортировать без знака «по умолчанию»?

javascript ecmascript-6 stkvtflw
источник
7
Вы можете написать как export default class Template extends React.Component {
andykenward
Я знаю. Но как я могу импортировать компонент, который был экспортирован без «по умолчанию»? Это должно быть возможно
stkvtflw
2
@stkvtflw Если я ответил на ваш вопрос, пожалуйста, примите его, чтобы другие пользователи тоже могли получить пользу.
Джед Ричардс

Ответы:

571

Экспорт без 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'
Джед Ричардс
источник
12
ХОРОШО. Но это похоже на еще одно, казалось бы, произвольное решение, для которого я не вижу смысла, но должен запомнить. Я скучаю по какой-то веской причине, что это так? Во многих проектах будут десятки компонентов React. Наличие каждого отдельного файла, каким бы маленьким он ни казался, немного анальным. Особенно больно, если многие из них имеют общие функции помощников. Это позволяет синхронизировать больше строк, что, кажется, немного противодействует. Чего мне не хватает?
9
Спасибо. Я думаю , что вы ответите прекрасно объяснил это: import React, {Component} from 'react';.
Цянь Чен
10
Хороший ответ. У меня есть что добавить к этому: Пробуйте импорт использовать операторы , как это: import RaisedButton from 'material-ui/RaisedButton'; вместо import {RaisedButton} from 'material-ui'; Это позволит сделать процесс сборки быстрее и ваш выход строить меньше.
Шехар Кумар
3
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
xgqfrms
4
@ShekharKumar У вас есть источник, чтобы import Binding from 'module/Binding'быть более эффективным, чем import {Binding} from 'module'?
Дживан Тахар
4

Добавить {} при импорте и экспорте: 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 />
    </>
  );
}

Sand Рабочая песочница для игры: https://codesandbox.io/s/export-import-example-react-jl839?fontsize=14&hidenavigation=1&theme=dark

Хасан Сефа Озалп
источник