2016-08-27 18 views
6

Vì vậy, tôi chỉ cần tải về mã nguồn từ một khuôn khổ Phản ứng, và tôi nhận được lỗi này trong Terminal:Tại sao thiết lập trạng thái của React Component bên ngoài constructor?

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 | 

Câu hỏi của tôi là, tại sao người ta thiết lập một nhà nước Phản ứng phần của như thế này? Lợi ích nếu nó sẽ gây lỗi cho một số người? Ngoài ra, có một cài đặt trước Babel hoặc plugin tôi có thể nhận được để ngăn chặn lỗi này?

Đây là cách tôi thường được thiết lập trạng thái của một thành phần, và từ những gì tôi đã nhìn thấy, đây là truyền thống:

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

Đối với hồ sơ, đây là toàn bộ tài liệu:

// 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 })} 
     /> 
    ) 
    } 

} 

Trả lời

8

Ví dụ đầu tiên là sử dụng các thuộc tính lớp mà không phải là một phần của spec ES6. Bạn có thể sử dụng chúng với babel bằng cách sử dụng cài đặt trước stage-2 hoặc mô-đun plugin babel-plugin-transform-class-properties.

Cách sử dụng chủ yếu là vấn đề tùy chọn và sẽ tạo ra kết quả tương tự như ví dụ thứ hai của bạn khi chuyển đổi với 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

Các vấn đề liên quan