Question

我正在阅读Egghead的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

子类使用stage 3 proposal的类字段，而不是现有标准的一部分。它们为构造体提供了语法糖。正如this question中所解释的那样，有一个特定的顺序来执行类字段分配。

子类与此ES6类完全相同（另请参阅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)指的是不存在的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);

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

2 个答案: