React - Umschalten der Sichtbarkeit eines Elements funktioniert nicht

Question

Ich versuche die Sichtbarkeit eines Menüs in einer React App zu ändern. Ich habe versucht, indem ich die Zustandeigenschaft setze, die ich beim Klicken ändere. Und dann überprüfe ich den Objektstatus, um die Sichtbarkeit zu ändern. Dies ist der Code:

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

ich einen Fehler:

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

Was mache ich falsch?

Answer 1

Änderungen:

1. Sie definieren keine class innerhalb eines anderen class, wenn Sie eine separate Klasse wollen, dann außerhalb innerhalb derselben Datei definieren. Wir können mehrere classes in derselben Datei erstellen.

2. Verwenden entweder es6 oder es5 Weg, um eine Komponente reagieren zu schaffen, den Sie verwenden es6 Weg für äußere und innere es5 für.

3. Seit Name beginnt mit kleinen Buchstaben als HTML-Elemente behandelt werden, so dass sie einer Regel, dass alle Komponenten reagieren mit einem Großbuchstaben beginnen müssen, so dass anstelle von menuList Verwendung MenuList.

4.var menuList = ..... ist keine gültige Syntax, überprüfen Sie weitere Details über Klasse MDN Doc.

Schreiben Sie den Code wie folgt aus:

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