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 - 切換不可用的元素的可見性

回答

相關問題