कन्स्ट्रक्टर के बाहर एक प्रतिक्रिया घटक का राज्य क्यों सेट करें?

Question

तो मैं सिर्फ एक रूपरेखा प्रतिक्रिया से स्रोत कोड डाउनलोड किया है, और मैं टर्मिनल में इस त्रुटि हो रही है:

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 | 

मेरा प्रश्न है, क्यों लोग एक इस तरह घटक के राज्य प्रतिक्रिया सेट करूँ? अगर कुछ लोगों के लिए यह त्रुटि होगी तो क्या फायदा है? साथ ही, क्या इस त्रुटि को रोकने के लिए कोई बैबेल प्रीसेट या प्लगइन है?

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

} 

Answer 1

:

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

रिकॉर्ड के लिए, इस पूरे दस्तावेज है:

इस तरह मैं आमतौर पर एक घटक के राज्य की स्थापना की है, और मैं क्या देखा है से, यह पारंपरिक है पहला उदाहरण कक्षा गुणों का उपयोग कर रहा है जो ES6 spec का हिस्सा नहीं है। आप stage-2 प्रीसेट या babel-plugin-transform-class-properties प्लगइन मॉड्यूल का उपयोग करके उन्हें लेबल के साथ उपयोग कर सकते हैं।

उपयोग ज्यादातर प्राथमिकता का विषय है और बैबेल के साथ पारदर्शी होने पर आपके दूसरे उदाहरण के समान परिणाम देगा।

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