javascript - react -切换元素的可见性不起作用

我正在尝试在React应用程序中切换菜单的可见性。我尝试通过设置点击时更改的state属性。然后，我正在检查对象状态以切换可见性。这是代码：

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({
>             ^

我究竟做错了什么？

最佳答案

变化：

1.不要在另一个class内定义class，如果要使用单独的类，请在同一文件的外部定义。我们可以在同一文件中创建多个classes。

2.使用es6或es5方式创建反应组件，外部使用es6方式，内部使用es5方式。

3.由于名称以小写字母开头被视为HTML元素，因此这是所有React组件必须以大写字母开头的规则，因此请使用menuList代替MenuList。

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