Question

我有一些代码如下

var React = require('react');

var Controls = React.createClass({
propTypes: {
    countdownStatus: React.PropTypes.string.isRequired,
    onStatusChange: React.PropTypes.func.isRequired
},

onStatusChange(newStatus) {
    return ()=>{
        this.props.onStatusChange(newStatus);
    }
    // this.props.onStatusChange(newStatus);
},

render() {
    var {countdownStatus} = this.props;
    var renderStartStopButton = ()=>{
        if(countdownStatus == 'started') {
            return (
                <button className="button secondary"
                    onClick={this.onStatusChange('paused')}
                >Pause</button>
            )
        } else if(countdownStatus == 'paused') {
            return (
                <button className="button primary"
                    onClick={this.onStatusChange('started')}
                >Start</button>
            )
        }
    }

    return(
        <div className="controls">
            {renderStartStopButton()}
            <button className="button alert hollow"
                onClick={this.onStatusChange('stopped')}
            >Clear</button>
        </div>
    )
}
})

module.exports = Controls;

我的问题在于onStatusChange（newStatus）的功能，除了返回匿名函数之外，使用注释语句是错误的。但我无法得到返回函数和直接调用函数之间的区别。

任何人都可以帮忙解释一下这个区别吗？非常感谢你！

Answer 1

您也可以通过将onStatusChange(newStatus)更改为箭头功能直接调用它。

onStatusChange => (newStatus) {
  this.props.onStatusChange(newStatus);
}

<button className="button secondary"
   onClick={() => this.onStatusChange('paused')}
 >Pause</button>

或

<button className="button alert hollow"
   onClick={this.onStatusChange.bind(this,'stopped')}
 >Clear</button>

原因是arrow函数绑定了上下文，这里绑定this并传递参数列表中的任何内容。在第二个示例中，如果您不使用箭头功能，则必须将this与参数一起传递。

使用return函数和调用函数有什么区别

1 个答案: