React - コンポーネントをecma6に翻訳するjavascript

Question

私は単純なボタンホバーの例をemca6（私はbabelを使用しています）に翻訳しようとしており、失敗しています。私は私のバインドが何とか間違っていると思いますが、私は、JScriptのために新たなんだと、完全に理解していない：

`

constructor(props) { 
     super(props);` 

私が意味する、私はそれがpythonでスーパーのようなものだということを得るが、なぜ奇妙パラメータとして渡された小道具の構文？

/* non emca6 */ 
import React from 'react' 

var HoverButton = React.createClass({ 
    getInitialState: function() { 
     return {hover: false}; 
    }, 

    mouseOver: function() { 
     this.setState({hover: true}); 
    }, 

    mouseOut: function() { 
     this.setState({hover: false}); 
    }, 

    render: function() { 
     var label = "foo"; 
     if (this.state.hover) { 
      label = "bar"; 
     } 
     return React.createElement(
      "button", 
      {onMouseOver: this.mouseOver, onMouseOut: this.mouseOut}, 
      label 
     ); 
    } 
}); 

React.render(React.createElement(HoverButton, null), document.body); 


export default HoverButton; 

/* emca6 */ 

import React from 'react'; 

class HoverButton extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = ({hover: false}); 
     this.mouseOver = this.mouseOver.bind(this); 
     this.mouseOut = this.mouseOut.bind(this); 
    } 

    mouseOver(){ 
     this.setState = ({hover: true}); 
    } 

    mouseOut(){ 
     this.setState = ({hover: false}); 
    } 


    render() { 
     var label = "idle"; 
     if (this.state.hover) { 
      label = "active"; 
     } 
     return React.createElement(
      "button", 
      {onMouseEnter: this.mouseOver, onMouseOut: this.mouseOut}, 
      label, 

     ); 
    } 
} 

export default HoverButton; 

Answer 1

私はこれが何をすべきだと思う：

import {Component} from 'react' 

class HoverButton extends Component { 
    getInitialState: function() { 
     return {hover: false}; 
    }, 

    mouseOver: function() { 
     this.setState({hover: true}); 
    }, 

    mouseOut: function() { 
     this.setState({hover: false}); 
    }, 

    render: function() { 
     const label = this.state.hover ? "bar" : "foo"; 
     return <button 
        onMouseOver={this.mouseOver.bind(this)} 
        onMouseOut={this.mouseOut.bind(this)}> 
        label 
       </button>; 
     ); 
    } 
}); 

は、イベントハンドラにbind秒に注目してください。 this.mouseOverのような関数を渡すだけであれば、間違ったコンテキスト（this）になります。

Answer 2

わかりましたので、私はemca6に書いておきたいと思いますし、私たちの国家を縛ってそれを割り当てる正しい方法に関する答えを書いて、私は次のように行きました。

我々が結合して、そのように割り当て、なぜ私はまだ完全にはよく分からないが：

import {Component} from 'react' 

class HoverButton extends React.Component { 
    constructor(props, context) { 
     super(props, context); 
     this.state = ({hover: false}); 
    } 

    mouseOver(){ 
     this.setState({hover: true}); 
    } 

    mouseOut(){ 
     this.setState({hover: false}); 
    } 


    render() { 
     const label = this.state.hover ? "active" : "idle"; 
     return React.createElement(
      "button", 
      {onMouseEnter: this.mouseOver.bind(this), onMouseOut: this.mouseOut.bind(this)}, 
      label 
     ); 
    } 
} 

export default HoverButton; 

EDIT：これ読んだ後：Unable to access React instance (this) inside event handler を私はほとんどの状態をバインドする方法については本当に困惑していますコスト効率のよい方法です。これをコンストラクタにバインドすることはできません。

編集2：だから私はいくつかの理由ですぐに戻ってコンストラクタへのバインド（これはもともとだったように）とその作業を移動しました。

import React from 'react' 
class HoverButton extends React.Component { 
    constructor(props, context) { 
     super(props, context); 
     this.state = ({hover: false}); 
     this.mouseOver = this.mouseOver.bind(this); 
     this.mouseOut = this.mouseOut.bind(this); 
    } 

    mouseOver(){ 
     this.setState({hover: true}); 
    } 

    mouseOut(){ 
     this.setState({hover: false}); 
    } 

    render() { 
     const label = this.state.hover ? "active" : "idle"; 
     return React.createElement(
      "button", 
      {onMouseEnter: this.mouseOver, onMouseOut: this.mouseOut}, 
      label 
     ); 
    } 
} 

export default HoverButton;