Reactコンポーネントクラスに構文エラーがあるのはなぜですか？

Question

私は自分のコードに構文エラーがあります。なぜそれが分からないのですか？それは私が参考文献を使ったやり方と関係がありますか？ここで

export default class ToggleMenu extends React.Component { 

    showRight: function() { 
    this.refs.right.show(); 
    } 

    render() { 
    return (
     <div> 
     <button onClick={this.showRight}>Show Left Menu!</button> 
     {/* 
     <Menu ref="right" alignment="right"> 
      <MenuItem hash="1">First</MenuItem> 
      <MenuItem hash="2">Second</MenuItem> 
      <MenuItem hash="3">Third</MenuItem> 
     </Menu> 
     */} 
     </div> 
    ); 
    } 
} 

は誤りです：

./src/components/ToggleMenu/ ToggleMenu.js Module build failed: SyntaxError: Unexpected token (13:14)

showRight: function() { 
    this.refs.right.show(); 
} 

Answer 1

あなたが混ざっオブジェクトリテラルとクラスを取得しています。あなたのコードはオブジェクトリテラルではなくクラスの中にあるので、renderのようにメソッド定義構文を使用する必要があります。クラスは、唯一の原型メソッドと（ECMAScriptの2015のような）コンストラクタを含めることができます。

showRight() { 
    this.refs.right.show(); 
} 

さもないと、それはlabelと関数の宣言として解釈されますが、functionキーワードで関数宣言は、このように、クラスのボディにすることはできません

：構文エラー： thisがグローバルスコープの this値を成分を意味していないように、また

showRight: //label 
function() { //function declaration, not valid in class body! 
    ... 
} 

は、あなたの方法にbind(this)に確認してください

constructor(props) { 
    super(props); 
    this.showRight = this.showRight.bind(this); 
} 

詳細については、class bodiesをMDNでご覧ください。あなたのshowRightに続いて

<Menu ref={right => this.right = right} alignment="right"> 

：

---

ref Sのご利用については、あなたが代わりにプレーンな文字列のコールバックを使用する必要がありますuの感謝の意味を作ること

this.right.hide();