Возможно ли объявление переменной внутри класса и вне метода

Question

class Counter extends React.Component {
    var a = 'bla bla';
    render(){ 
    return (
     <h1>{a}</h1>
    )

}
}

1) Я описал переменную внутри класса

2) Я получаю ошибку, я знаю, что должен объявить внутри метода рендеринга, но я хочу знать, почему мы не должны объявлять вне рендера и внутри класса

class Counter extends React.Component {
        var a = 'bla bla';
        render(){ 
        return (
         <h1>{this.a}</h1>
        )

    }
    }

Я использовал это все еще, я получаю ошибку

class Counter extends React.Component {

    render(){ 
        var a = 'bla bla';
    return (
     <h1>{a}</h1>
    )

}
}

Следующий код решает мою проблему, но я хочу знать, почему я получил ошибку на предыдущем шаге

Answer 1

Переменные определены в некоторой области. Там нет места для всего класса. После использования классов ES6 полезно иметь хорошее представление о том, как они работают.

class Counter {
  constructor() {...}
  render() {...}
}

является синтаксическим сахаром для

function Counter() {
  // constructor
}
Counter.prototype.render = function () {...}

Нет места, где переменная могла бы быть определена в каждом экземпляре класса и быть доступной как в конструкторе, так и в методе render.

Возможно, это вариант использования для полей класса, которые являются предложением этапа 3 :

class Counter extends React.Component {
    a = 'bla bla';

    render(){ 
      return (
       <h1>{this.a}</h1>
      )
    }
}

Это не подходит, если a является константой. Тогда ему не нужно переназначаться каждый раз, и он может быть константой:

const a = 'bla bla';

class Counter extends React.Component {
    render(){ 
      return (
       <h1>{a}</h1>
      )
    }
}