Reactコンポーネントで予期しないトークンが表示されるのはなぜですか？

Question

私は本当にそれを修正する方法を理解することができない1つの問題があります。 Reactのドキュメントを確認したところ、私の構文はFacebookの公式ドキュメントのものと似ています。私は学習を開始しました

は、ライブラリーを反応させるの小道具を使用する方法を学びましたが、状態で、私は問題を抱えています。このコードは、カンマが存在するドキュメントではカンマ文字がそこに属していないというエラーをスローします。私はカンマを削除した場合、それはtodos is undefined言う：

class App extends Component { 
    // State 
    getInitialState() { 
     return (
     todos: ["Wake up early", "Do some body exercise", "Continue learning React"] 
    ) 
    }, <-- This is making the problem and it can't compile 
    // Props 
    render() { 
    return (
     <div id ="todo-list"> 
     <h1>Helo, user</h1> 
     <p>Things to do:</p> 
     <ul> 
     <li>{this.state.todos[0]}</li> 
     <li>{this.state.todos[1]}</li> 
     <li>{this.state.todos[2]}</li> 
     </ul> 
     </div> 
    ); 
    } 
}; 

私は、このチュートリアルYouTube linkから学んでいるが、これまでの彼のチュートリアルに従ったが、私は、このエラーに出くわしたと私は何をするか分かりません。

Answer 1

あなたはうまくいかない、ES2015クラスで、あなたのコンポーネントを作成するために、ES5の構文を使用しようとしています。 ES2015クラスを使用してコンポーネントを定義する場合、いくつかの重要な違いがあります。

インサイドES2015クラスは、メソッドの間にカンマがない、あなたは、オブジェクトリテラルを持つことが混乱取得することができます。

また、ES2015クラスでは、getInitialStateではなく、constructorを使用して初期状態を設定する必要があります。それはES5のcreateClassです。コンストラクタは、コンポーネントの新しいインスタンスが作成され、 "コンポーネントを構築する"ときに呼び出され、componentWillMountメソッドのように動作します。 ES2015クラスの「予約済み」メソッドです。ここで使用する方法ですconstructor：

constructor() { 
    super(); //super before anything else to call superclass constructor 
    this.state = { 
     todos: ["Wake up early", "Do some body exercise", "Continue learning React"] 
    }; 
} 

これは直接this.stateオブジェクトを設定します（しかコンストラクタでこれを行う！）todosはそれがなかったとしてgetInitialStateを使用していないため、ES2015と反応した未定義た理由をES5で。したがって、実際には状態を設定することはなく、todosは未定義です。

注：ReactコンポーネントでIDを使用しないでください。反応コンポーネントは、再利用と同じIDを持つ2つの要素を持つことはできません。