React - 要素の非表示を切り替える

Question

Reactアプリケーションでメニューの表示を切り替えようとしています。私はクリック時に変更する状態プロパティを設定してみました。そして、オブジェクトの状態をチェックして可視性を切り替えます。これはコードです：

constructor(props) { 
    super(props); 

    this.state = { 
     'menuOpen': false, 
    } 
} 

openMenu() { 
    var newState = !this.state.menuOpen; 
    this.setState({ 
     'menuOpen': newState 
    }); 
} 

var menuList = React.createClass({ 
    render: function() { 
     return (
      <div className={styles.menuList}> 
      <ul> 
       <li>Link</li> 
       <li>Link</li> 
       <li>Link</li> 
      </ul> 
      </div> 
     ); 
    } 
}); 

render() { 
    return (
     <div className={styles.menu}><span className={styles.menuIcon} onClick={this.openMenu.bind(this)} /> 
      {this.state.menuOpen ? <menuList /> : null} 
     </div> 
    ); 
} 

私はエラーを取得する：

> in ./src/components/post/index.js Module build failed: SyntaxError: 
> Unexpected token (31:8) 
> 
>  } 
>  var menuList = React.createClass({ 
>   ^

は私が間違って何をしているのですか？

Answer 1

変更：

1.は、あなたが別のクラスをしたい場合は、同じファイル内で外部の定義、別のclass内classを定義しないでください。同じファイルに複数のclassesを作成することができます。反応するコンポーネントを作成する

2.使用es6またはes5いずれかの方法、あなたは、外側と内側のためes5ためes6方法を使用しています。

名はすべての成分を反応させ、その規則がそう代わりmenuList使用MenuListを、大文字で始めなければならないので、小さい文字は、HTML要素として扱われるから始まるので。

4.var menuList = .....は無効な構文です。クラスMDN Docの詳細を確認してください。

このようなコード書く：あなたのメニューリストコンポーネントは、あなたの他のコンポーネントのクラス内の変数内で定義されているのはなぜ

constructor(props) { 
    super(props); 

    this.state = { 
     'menuOpen': false, 
    } 
} 

openMenu() { 
    var newState = !this.state.menuOpen; 
    this.setState({ 
     'menuOpen': newState 
    }); 
} 

render() { 
    return (
     <div className={styles.menu}><span className={styles.menuIcon} onClick={this.openMenu.bind(this)} /> 
      {this.state.menuOpen ? <MenuList /> : null} 
     </div> 
    ) 
} 

class MenuList extends React.Component{ 
    render() { 
     return (
      <div className={styles.menuList}> 
       <ul> 
        <li>Link</li> 
        <li>Link</li> 
        <li>Link</li> 
       </ul> 
      </div> 
     ); 
    } 
}