Question

我正在尝试将一个简单的按钮悬停示例转换为emca6（我正在使用babel）并继续失败。我想我的绑定在某种程度上是错误的，但我是jscript的新手并且不完全理解：

`

constructor(props) {
        super(props);`

我的意思是我觉得它就像python中的super一样，但为什么带有props的奇怪语法作为参数传递？

/* 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;

编辑：所以看完之后：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;

React - 将组件翻译为ecma6 javascript

2 个答案: