React.js，如何避免var me = this？

Question

wondering about the best way to avoid using var me = this; in the following context. This method exists inside of a React component. I have used the underscore.js method _.bind() in the past - is there a more reacty way?

    findRoutes: function(){
        var me = this;
        if (!this.state.originId || !this.state.destinationId) {
            alert("findRoutes!");
            return;
        }
        var p1 = new Promise(function(resolve, reject) {
            directionsService.route({
                origin: {'placeId': me.state.originId},
                destination: {'placeId': me.state.destinationId},
                travelMode: me.state.travelMode
            }, function(response, status){
                if (status === google.maps.DirectionsStatus.OK) {
                    // me.response = response;
                    directionsDisplay.setDirections(response);
                    resolve(response);
                } else {
                    window.alert('Directions config failed due to ' + status);
                }
            });
        });
        return p1
    },

Answer 1

Preserving the correct this is more a JavaScript problem than React.

1) One option is to use the .bind() method:

 findRoutes: function(){
        if (!this.state.originId || !this.state.destinationId) {
            alert("findRoutes!");
            return;
        }
        var p1 = new Promise(function(resolve, reject) {
            directionsService.route({
                origin: {'placeId': this.state.originId},
                destination: {'placeId': this.state.destinationId},
                travelMode: this.state.travelMode
            }, function(response, status){
               //...
            });
        }.bind(this)); // <----------- .bind(this)
        return p1
    },

The .bind(this) will create a new function that has the same this as the findRoutes() function.

2) Another option from ES6 is the arrow function :

 findRoutes: function(){
        if (!this.state.originId || !this.state.destinationId) {
            alert("findRoutes!");
            return;
        }
        var p1 = new Promise((resolve, reject) => { // <------- used =>
            directionsService.route({
                origin: {'placeId': this.state.originId},
                destination: {'placeId': this.state.destinationId},
                travelMode: this.state.travelMode
            }, function(response, status){
               //...
            });
        });
        return p1
    },

The arrow function will take lexically this from the findRoutes() .

See this article for more details about this keyword.

Answer 2

My tip to avoid the need of referencing this on the context is start using ES6 's arrow functions

An arrow function expression has a shorter syntax compared to function expressions and lexically binds the this value (does not bind its own this, arguments, super, or new.target). Arrow functions are always anonymous.

So you could use a arrow function as the promise callback.

let p1 = new Promise((resolve, reject) => {
    resolve(this.state)
})

The best way in my opinion of using ES6 in your React project is using Babel for compiling the ES6 code and Webpack for module bundling.

Here is a good example of project to start using webpack and babel:

https://github.com/choonkending/react-webpack-node

Answer 3

您可以使用箭头函数 ，该函数提供与此值的词法绑定