javascript - Is there a better way to bind 'this' in React Component classes? - Stack Overflow

admin管理员组

文章数量:1405314

I am currently working on a react app, and I found having to bind this a bit cumbersome when a ponent class has many functions.

Example

class Foo extends Component {
  constructor(props){
    super(props);
    this.function1 = this.function1.bind(this);
    this.function2 = this.function2.bind(this);
    this.function3 = this.function3.bind(this);
  }
  function1() {
    ...
  }
  function2() {
    ...
  }
  function3() {
    ...
  }
}

Is there a more efficient way to do this?

I am currently working on a react app, and I found having to bind this a bit cumbersome when a ponent class has many functions.

Example

class Foo extends Component {
  constructor(props){
    super(props);
    this.function1 = this.function1.bind(this);
    this.function2 = this.function2.bind(this);
    this.function3 = this.function3.bind(this);
  }
  function1() {
    ...
  }
  function2() {
    ...
  }
  function3() {
    ...
  }
}

Is there a more efficient way to do this?

• javascript
• reactjs
• es6-class

Share Improve this question Follow edited Jun 4, 2020 at 2:33 Yilmaz 50k1818 gold badges218218 silver badges271271 bronze badges asked Jan 12, 2017 at 16:46 Faraz KhanFaraz Khan 10333 bronze badges 2

• how are the functions being used? – Daniel A. White Commented Jan 12, 2017 at 16:48
• You can also bind it in-line as mentioned in this or this post – RBT Commented Apr 30, 2017 at 6:48

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

You can avoid having to bind methods by using the transform-class-properties Babel plugin, which is an experimental ES7 feature. Make sure you enable stage-0 in order to use it.

This allows the use of arrow functions when defining your class methods, leveraging arrow functions' lexical binding so this refers to function's context (in this case the class), like so:

class Foo extends Component {
    boundFunction = () => { /* 'this' points to Foo */ }
}

You can shorten it a bit with:

this.function1 = ::this.function1

You'll need https://babeljs.io/docs/plugins/transform-function-bind/

本文标签： javascriptIs there a better way to bind 39this39 in React Component classesStack Overflow