在 React ES6 类中调用静态函数

IT技术 javascript reactjs ecmascript-6
2021-04-07 02:16:41

我有以下 ReactJS 类:

import React from 'react'

export class Content extends React.Component {

  static getValue(key) {
    return key
  }

  render() {
    let value = this.getValue(this.props.valueKey);
    return <span dangerouslySetInnerHTML={{__html: value}} />
  }
}

但我有以下错误:

TypeError: this.getValue is not a function

我不明白。这是调用静态函数的好方法吗?我认为 react 正在做一些静态的事情,但我不知道是什么。

2个回答

需要在类而不是实例上访问静态方法。因此,在您的情况下,请使用:

Content.getValue()

但是,静态方法将无法访问this——根据上面的代码示例,我认为您不希望该方法是静态的。

更多:ES6 中的静态成员

'getValue' 函数本身是静态的 - 所以它可以用 this.constructor.getValue(params) 调用......我经常在我的代码中使用这个方法。我没有看到这个函数不是静态的原因,除非需要在函数内部调用“this”。
2021-06-15 02:16:41

您可以作为this.constructor.getValue.

编辑:我在这里添加了一个 JSFiddle 我所做的唯一更改是从构造函数添加函数调用并删除危险设置的 innerHTML - 如图所示,您可以从 this.constructor 访问 getValue 静态,并且工作正常。

不与 React.Component
2021-05-23 02:16:41
不正确 - 你可以。相信我这一点。我会添加一个 JSBin
2021-06-01 02:16:41
@OliverDixon 因为“this.contrstructor”指向构造函数本身。所以它等于Content.getValue但不需要硬编码类名
2021-06-02 02:16:41
有趣的是,我们需要通过构造函数。嗯。为什么是这样?
2021-06-15 02:16:41
@GeoffreyAbdallah 这很有趣。因此,您还可以将实例对象作为参数传递给静态类,并且仍然可以访问它,就像它不是静态的一样。很酷
2021-06-19 02:16:41