Call a static function into the class React ES6

问题:

I have the following ReactJS class:

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}} />
  }
}

But I have the following error:

TypeError: this.getValue is not a function

I don't understand. Is this the good way to call a static function? I think react is doing something with statics, but I don't know what.

回答1:

A static method needs to be accessed on the class not an instance. So in your case, use:

Content.getValue()

However, a static method won't be able to access this -- I don't think you want the method to be static based on your code sample above.

More: Static Members in ES6

回答2:

You can access from within the class as this.constructor.getValue.

Edit: I've added a JSFiddle here. The only change I made was adding the function call from the constructor and removing the dangerously set innerHTML - As shown, you can access the getValue static from this.constructor, and works just fine.