Присваивание внутри объявления подкласса - React.Component

Question

Я изучаю учебник Egghead's React и на одном из уроков я нашел следующее объявление класса:

class StopWatch extends React.Component {
        state = {lapse: 0, running: false}

        render() {
            const {lapse, running} = this.state
            const buttonStyles = {
                border: '1px solid #ccc',
                background: '#fff',
                fontSize: '2em',
                padding: 15,
                margin: 5,
                width: 200
            }
            return (
                <div style={{textAlign: 'center'}}>
                    <label style={{fontSize: '5em', display: 'block'}}>
                        {lapse}ms
                    </label>
                    <button style={buttonStyles}>{running ? 'Stop' : 'Start'}</button>
                    <button style={buttonStyles}>Clear</button>
                </div>
            )

        }
    }

Так что, глядя на код, мне было просто интересно, что это задание сверху. Я посмотрел на класс и расширяет документацию по MDN, и в нем ничего не говорится о разрешении присваивания внутри объявления класса.

Кроме того, я попробовал это на примере кода, и он выдает ошибку:

class Square {
        constructor(prop1, prop2) {
            this.prop1 = prop1
            this.prop2 = prop2
        }
    }

    class Polygon extends Square {
        constructor(prop1, prop2, prop3) {
            super(prop1, prop2)
        }
        prop2 = prop3
        render() {
            console.log(prop2)
        }
    }

Итак... почему это работает?

Answer 1

Подкласс использует поля класса, которые являются предложением стадии 3 и не являются частью существующего стандарта. Они обеспечивают синтаксический сахар для тела конструктора. Как объясняется в этом вопросе, существует определенный порядок, в котором выполняются назначения полей класса.

Подкласс идентичен этому классу ES6 (проверьте также вывод Babel, чтобы получить некоторые идеи о том, что происходит):

class Polygon extends Square {
    constructor(prop1, prop2, prop3_that_doesnt_collide) {
        super(prop1, prop2);
        this.prop2 = prop3;
    }

    render() {
        console.log(prop2)
    }
}

console.log(prop2) относится к несуществующим prop2 переменная и не prop2 имущество.

Обратите внимание, потому что prop3 был расположен вне метода конструктора, это не относится к prop3 параметр конструктора, но для некоторых несуществующих prop3 переменная, так prop3_that_doesnt_collide параметр и prop3 не сталкивайтесь

поскольку prop2 присваивание опирается на параметр конструктора, его следует поместить в метод конструктора:

class Polygon extends Square {
    constructor(prop1, prop2, prop3) {
        super(prop1, prop2);
        this.prop2 = prop3;
    }

    render() {
        console.log(this.prop2)
    }
}

Так как он просто сразу заменяет prop2 значение с prop3, может быть:

constructor(prop1, prop2, prop3) {
    super(prop1, prop3);
}

Answer 2

Синтаксис, который вы пытаетесь использовать, не стандартизирован, и вам понадобится Babel для переноса кода. В качестве альтернативы вы можете использовать статические члены в классах -

let Foo = class {
  static get staticData() {
    return 'Static Data';
  }
}

console.log(Foo.staticData);