Question

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

}
}

1）我已经在类中描述了一个变量

2）我遇到错误，我知道我必须在render方法中声明，但是我想知道为什么我们不应该在render和内部类之外声明

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方法中均可用。

这可能是stage 3 proposal类字段的用例：

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

是否可以在类内和方法外声明变量

1 个答案: