Как пространство имен классов es6 (для компонентов React)

Это часть вопросника ES6. Ответьте на вопрос. Я пытаюсь использовать компоненты с именами в React с классами ES6 и Babel. Поэтому я предполагаю, что реальный вопрос заключается в том, как назвать классы пространства es6, чтобы я мог сделать то, что объяснено здесь: https://facebook.github.io/react/docs/jsx-in-depth.html#namespaced-components

Так как я получаю неожиданную ошибку токена:

class Headline extends Component { ... }

class Headline.Primary extends Component { ...
              ^

Ответ 1

Это не изменится с ES6, вам все равно придется выполнять назначение:

Headline.Primary = class Primary extends Component { … };

Однако использование классов типа Headline в качестве пространств имен становится довольно устаревшим с ES6 (и в любом случае это была спорная практика в любом случае), вы должны использовать новую систему модулей. Экспортируйте Primary в качестве именованного экспорта, а вместо импорта класса Headline скорее сделайте import * as headlines from ….

Ответ 2

объявление класса ECMAScript-6 синтаксис ожидает стандартного BindingIdentifer в качестве имени класса. Точка не является допустимым символом внутри имени идентификатора.

В контексте, используемом в ссылке в OP, "пространство имен" является объектом, а свойства добавляются к этому объекту один за другим с использованием точечной нотации для доступа к свойствам.

Вы можете реплицировать это, используя выражение класса:

'use strict'

var ns = {}

ns.MyClass = class {
  constructor() {
    console.log('in constructor')
  }
}

new ns.MyClass()

Ответ 3

Эта ссылка

Это не совсем то, что вы пытаетесь сделать, но является альтернативой.

Другой способ сделать это почти так же, как @Bergi уже указал, но я просто уточняю его дальше:

let Headline = class Headline extends Component { }
Headline.Primary = class Primary extends Component { }

export {Headline as default}

// in another module:
import Headline from 'headline';

let headline = new Headline();
let primary = new Headline.Primary();