子类声明中的赋值 - React.Component

Question

我正在学习 Egghead 的 React 教程，在其中一课中我发现了以下 class 声明：

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>
            )

        }
    }

所以看着代码，我只是对顶部的那个作业感到好奇。我查看了 class 并扩展了 MDN 上的文档，它没有说明允许在 class 声明中进行赋值。

此外，我在示例代码上进行了尝试，但它抛出了一个错误：

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

您尝试使用的语法未标准化，您需要 Babel 来转换您的代码。或者，您可以在类 -

中使用静态成员

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

console.log(Foo.staticData);

Answer 2

subclass 使用 class 个字段 stage 3 proposal and aren't a part of existing standard. They provide syntactic sugar for constructor body. As explained in ，class 字段分配有一个特定的顺序。

subclass 与此 ES6 class 相同（另请检查 Babel output 以了解发生了什么）：

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

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

console.log(prop2) 指的是 non-existing prop2 变量而不是 prop2 属性.

注意，因为 prop3 位于构造函数方法之外，它不引用 prop3 构造函数参数，而是引用一些 non-existing 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)
    }
}

因为它只是立即用 prop3 替换 prop2 值，它可以是：

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

子类声明中的赋值 - React.Component

assignment inside subclass declaration - React.Component

javascript

syntax

ecmascript-6

reactjs

ecmascript-next