Question

有人可以解释

之间的区别

匿名函数

  <button onClick={() => this.functionNameHere()}></button>

和

调用下面的函数

  <button onClick={this.functionNameHere()}></button>

以及何时使用（例如不同的场景使用其中一个）。

Answer 1

在 ES6 中，第一个场景“this”指的是所调用函数所属的Component。 <button onClick={() => this.functionNameHere()}></button>相当于<button onClick={this.functionNameHere.bind(this)}></button>。

另一方面，在<button onClick={this.functionNameHere()}></button>中，这个“指的是按钮本身。

我来自Python，我仍然对javascript环境有点困惑。观看此视频，了解更多信息：https://www.youtube.com/watch?v=SBwoFkRjZvE&index=4&list=PLoYCgNOIyGABI011EYc-avPOsk1YsMUe_

Answer 2

第一个示例正确绑定() => this.functionNameHere()的值（lambda在ES 2015中努力解决的确切问题）。

this

后者使用export default class Album extends React.Component { constructor(props) { super(props); } componentDidMount () { console.log(this.props.route.appState.tracks); // `this` is working axios({ method: 'get', url: '/api/album/' + this.props.params.id + '/' + 'tracks/', headers: { 'Authorization': 'JWT ' + sessionStorage.getItem('token') } }).then(function (response) { console.log(response.data); this.props.route.appState.tracks.concat(response.data); // 'this' isn't working }).catch(function (response) { console.error(response); //sweetAlert("Oops!", response.data, "error"); }) }的范围值，这可能不是您所期望的。例如：

.then( (response) => {
        console.log(response.data);
        this.props.route.appState.tracks.concat(response.data); // 'this' isn't working
    } )

我们需要在这里使用lambda：

.then(function (response) {
            console.log(response.data);
            this.props.route.appState.tracks.concat(response.data); // 'this' isn't working
        }.bind(this) )

或手动绑定：

$ pyan.py -c backup.py journal.py journalcmd.py links.py --dot | dot -Tpng > backup-use-and-def.png

示例被盗：React this is undefined

何时在JSX中使用匿名函数

2 个答案: