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创建反应组件的方式，您使用es6方式进行外部和es5内。

3. 由于名称以小写字母开头被视为HTML元素，因此规则是所有React组件必须以大写字母开头，因此menuList使用{而不是MenuList {1}}。

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

React - 切换元素不可用的可见性

1 个答案: