Вызов статической функции в класс React ES6

У меня есть следующий класс 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

Я не понимаю. Это хороший способ вызвать статическую функцию? Я думаю, что реакция делает что-то со статикой, но я не знаю, что.

Ответ 1

Статический метод должен быть доступен для класса, а не для экземпляра. Поэтому в вашем случае используйте:

Content.getValue()

Однако статический метод не сможет получить доступ к this - я не думаю, что вы хотите, чтобы метод был статическим на основе вашего примера кода выше.

Подробнее: Статические члены в ES6

Ответ 2

Вы можете получить доступ из класса в качестве this.constructor.getValue.

Изменить: я добавил JSFiddle здесь. Единственное изменение, которое я сделал, это добавить вызов функции из конструктора и удалить опасно установленный innerHTML - Как показано, вы можете получить доступ к статическому getValue из this.constructor и отлично работать.