2016-08-27 5 views
6

Так что я только что загрузил исходный код из React рамки, и я получаю эту ошибку в терминале:Зачем устанавливать состояние компонента React вне конструктора?

ERROR in ./src/components/TextEditor.js 
    Module build failed: SyntaxError: Unexpected token (24:8) 

    22 | 
    23 | // Set the initial state when the app is first constructed. 
> 24 | state = { 
    |  ^
    25 |  state: initialState 
    26 | } 
    27 | 

Мой вопрос, почему люди ставят РЕАКТ состояние Компонента, как это? Какая польза, если это будет ошибка для некоторых людей? Кроме того, есть ли предустановка Babel или плагин, который я могу предотвратить, чтобы предотвратить эту ошибку?

Это, как я обычно устанавливается состояние данного компонента, и от того, что я видел, это обычное:

constructor() { 
    super(); 
    this.state = { 
    state: initialState 
    }; 
} 

Для записи, это весь документ:

// Import React! 
import React from 'react' 
import {Editor, Raw} from 'slate' 

const initialState = Raw.deserialize({ 
    nodes: [ 
    { 
     kind: 'block', 
     type: 'paragraph', 
     nodes: [ 
     { 
      kind: 'text', 
      text: 'A line of text in a paragraph.' 
     } 
     ] 
    } 
    ] 
}, { terse: true }) 

// Define our app... 
export default class TextEditor extends React.Component { 

    // Set the initial state when the app is first constructed. 
    state = { 
    state: initialState 
    } 

    // On change, update the app's React state with the new editor state. 
    render() { 
    return (
     <Editor 
     state={this.state.state} 
     onChange={state => this.setState({ state })} 
     /> 
    ) 
    } 

} 

ответ

8

В первом примере используются свойства класса, которые не являются частью спецификации ES6. Вы можете использовать их с babel, используя предустановку stage-2 или модуль плагина babel-plugin-transform-class-properties.

Использование в основном зависит от предпочтений и даст тот же результат, что и ваш второй пример, когда транслируется с помощью babel.

https://babeljs.io/repl/#?evaluate=true&lineWrap=false&presets=react%2Cstage-0&experimental=false&loose=false&spec=false&code=%2F%2F%20Code%20goes%20here%0Aclass%20First%20%7B%0A%20%20state%20%3D%20%7B%0A%20%20%20%20value%3A%20true%0A%20%20%7D%0A%7D%3B%0A%0Aclass%20Second%20%7B%0A%20%20constructor%20()%20%7B%0A%20%20%20%20this.state%20%3D%20%7B%0A%20%20%20%20%20%20value%3A%20true%0A%20%20%20%20%7D%3B%0A%20%20%7D%0A%7D%3B%0A