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

我试图在React应用程序中切换菜单的可见性。我试图通过设置我点击更改的状态属性。然后我检查对象状态以切换可见性。这是代码：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({ 
>   ^

我在做什么错？

来源

2017-06-18 Leff

尝试使用大写的第一个字母菜单列表 –

为什么在你的其他组件的类变量中定义你的菜单列表的组成部分？我敢肯定，ES6类声明中只允许使用方法，而不是任意'var'声明。尝试将你的'menuList'组件移动到它自己的类声明中。 – sbking

变化：

不要定义class内的另一个class，如果你想有一个单独的类，然后同一个文件中定义之外。我们可以在同一个文件中创建多个classes。

2.选其一es6或创建一个反应成分，使用的是es6方式为外和es5对于内的es5方式。

由于名称以小写字母被视为HTML元素，所以它的规则，所有的反应的组分必须以大写字母开头，这样反而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> 
     ); 
    } 
}

来源

2017-06-18 14:25:36

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

回答

相关问题