Почему компонент взаимодействия es6 работает только с "экспортным дефолтом"?

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

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

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

Uncaught TypeError: Cannot read property 'toUpperCase' of undefined

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

Ответы

Ответ 1

Экспорт без 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'