2017-01-23 1 views
3

Следующий пример приведен на Preact homepage. Мне интересно, как и почему есть = задания и точки с запятой ; в классе фигурные скобки {}. Я уже несколько минут искал в Интернете, и, похоже, не понимаю.Определение класса JS ES6: Пример на домашней странице Preact: Я никогда не видел этого

Является ли этот TypeScript или какой-либо другой причудливый кузен JS? Кудрявые фигурные скобки выглядят как обычные назначения, а не определение класса.

export default class TodoList extends Component { 
    state = { todos: [], text: '' }; 
    setText = e => { 
     this.setState({ text: e.target.value }); 
    }; 
    addTodo =() => { 
     let { todos, text } = this.state; 
     todos = todos.concat({ text }); 
     this.setState({ todos, text: '' }); 
    }; 
    render({ }, { todos, text }) { 
     return (
      <form onSubmit={this.addTodo} action="javascript:"> 
       <input value={text} onInput={this.setText} /> 
       <button type="submit">Add</button> 
       <ul> 
        { todos.map(todo => (
         <li>{todo.text}</li> 
        )) } 
       </ul> 
      </form> 
     ); 
    } 
} 
+0

Я бы сказал, кузен или включает в себя предварительный процессор. переменные назначения внутри определения класса не являются _entirely_ вне вопроса (переменные-члены класса; IIRC ES7 имеет что-то подобное), но этот встроенный html может быть возвращен, определенно, не является чем-то, что я считаю частью стандартного ES6 +. –

+1

@XerenNarcy встроенный HTML - это просто JSX. – Phil

+0

@XerenNarcy: ES7 (ES2016) обязательно нет это. –

ответ

5

Это class instance fields (инициализаторы свойств). В настоящее время они представляют собой предложение второго этапа.

Их использование (наряду с import, export и другими функциями, которые не поддерживаются двигателями JS изначально) подразумевает, что Babel предполагается использовать для перевода примера.

Смежные вопросы