如何在ES6中使用箭头功能代替绑定方法

时间:2018-10-01 08:47:53

标签: javascript reactjs ecmascript-6

以前我是用这个来在React JSX组件中调用我的方法的,这个方法可以给我适当的输出

this.updateState.bind(this)

但是当我将上述声明替换为

() => this.updateState(...this)

这不会给我输出,它返回未定义

3 个答案:

答案 0 :(得分:5)

您应该替换

 () => this.updateState(...this)

 (...args) => this.updateState(...args)

Arrow函数从其父词法作用域继承其上下文。
从箭头函数调用函数时,它从调用者的“ this”引用继承。

答案 1 :(得分:1)

在React中,您可以将函数绑定到构造函数中的try { String file = Environment.getExternalStorageDirectory().getPath() + "/kmlfile.kml"; String[] kmlfile = file.split("/"); String kml=kmlfile[4]; File myFile = new File(Environment.getExternalStorageDirectory().toString() + "/DCIM/Camera/campus"); FileInputStream fIn = new FileInputStream(myFile); KmlLayer kmlLayer = new KmlLayer(mMap, fIn, getApplicationContext()); KmlLayer kmlLayer = new KmlLayer(mMap, R.raw.campus, getApplicationContext()); kmlLayer.addLayerToMap(); moveCameraToKml(kmlLayer); } catch (IOException | XmlPullParserException e) { e.printStackTrace(); } } this在您的情况下未定义,因为该函数未绑定到该函数。

this

然后您可以正常使用该功能。您不想每次都使用该功能将其绑定到constructor(props) { super(props) this.updateState = this.updateState.bind(this) }

如果您具有Babel的transform class properties插件,则可以通过定义它来自动绑定类函数

this

答案 2 :(得分:1)

转换类属性

updateState = () => {
  ...
}

看看这个:https://babeljs.io/docs/en/babel-plugin-transform-class-properties