반응 구성 요소에서 상태를 정의하는 방법은 무엇입니까?

나는 반응하는 아주 새로운 오전이 작동하는 방법을 궁금해 :반응 구성 요소에서 상태를 정의하는 방법은 무엇입니까?

여기

class App extends Component { 
> 4 | state = { 
    |  ^
    5 |  bands: [], 
    6 |  concerts: [] 
    7 | }

오류 메시지 :

ERROR in ./src/App.js 
Module build failed: SyntaxError: Unexpected token (4:8)

편집 (전체 구성 요소) :

import React, { Component } from 'react' 

class App extends Component { 
    state = { 
    bands: [], 
    concerts: [] 
    } 
    render() { 
    return <div>hei</div> 
    } 
} 

export default App

일부 솔루션 이에? 그건 아닌 그림과 같이 코드가 정말 당신이 언어 기능 ("클래스 필드")를 사용하려는 경우

class App extends Component { 
    constructor(props) { 
    super(props) 
    this.state = { 
     bands: [], 
     concerts: [] 
    }; 
    } 
    render() { 
    // Here you can access to this.state 
    return <div>hei</div> 
    } 
}

출처

2017-10-31 König des Lichts

는 전체 구성 요소를 제공합니다 :

당신이 생성자에 state 속성을 정의, 클래스 필드를 사용하지 않을 경우

. –

비표준 (잘못된 것이고 최근에 표준으로 바뀌 었음) 언어 기능을 사용하고있는 것처럼 보이므로 클래스 속성의 표기법을 지원하기 위해 추가 babel 변환이 필요합니다. https ://babeljs.io/docs/plugins/transform-class-properties/ – m90

코드가 실제로 표시된 것처럼 아직 언어로되어 있지 않은 언어 기능을 사용하려고 시도하고 있지만 여전히 [3 단계 제안]입니다. (https://github.com/tc39/proposal-class-fields). JSX를 처리하는 대부분의 React transpilation 설정도 해당 영역에 포함되어 있습니다. –

출처

2017-10-31 17:36:20

@Kinduser 스 니펫은 거의 동일하지만 T.J. 구문 제안 상태에 대한 추가 정보를 제공했습니다. – lilezek

하나의 옵션은 생성자 내부의 상태를 넣어하는 것입니다 아직까지는 stage 3 proposal입니다. 당신이 사용하고있는 어떤 변압기가 그걸 투명하게 취급하는지 확인해야합니다.

class App extends Component { 
    constructor(...args) { 
    super(...args); 
    this.state = { 
     bands: [], 
     concerts: [] 
    }; 
    } 
    render() { 
    return <div>hei</div> 
    } 
}

출처

2017-10-31 17:33:59 lilezek

반응 구성 요소에서 상태를 정의하는 방법은 무엇입니까?

답변

관련 문제