React类组件中使用const声明类属性报语法错误的原因

这个报错和React本身没有关系，是ES6类的原生语法规则限制：类的顶层作用域不属于普通块级/函数作用域，不允许使用const/let/var这类变量声明关键字，类内部默认只能定义实例方法、静态方法、静态属性，以及通过类字段（Class Fields）提案语法声明实例属性，你在类顶层直接写const声明属于非法语法，Babel转译时自然会抛出Unexpected token的语法错误。

结合你使用的babel-cli@6.24.1版本，给出以下可直接落地的解决写法：

可行实现方案 #

• 类字段声明写法（需配置Babel插件）
  直接去掉属性前的const关键字，类字段声明不需要变量修饰符：

  class Counter extends React.Component{
     // 类实例属性，无const/let/var前缀
     template_counter = (<div><h1>Counter Component</h1><p>count : 0 </p></div>);
     render(){
          return this.template_counter; 
      }
   }
  

  Babel6默认不支持类字段语法，需要安装转译插件：执行npm i babel-plugin-transform-class-properties -D，之后在Babel配置文件的plugins数组中加入该插件即可正常转译。

• 构造函数赋值写法（无兼容问题，无需额外插件）
  这是ES6类原生支持的标准写法，把属性挂载放到构造函数中：

  class Counter extends React.Component{
     constructor(props) {
       super(props);
       // 构造函数内为普通函数作用域，直接给this挂载实例属性
       this.template_counter = (<div><h1>Counter Component</h1><p>count : 0 </p></div>);
     }
     render(){
          return this.template_counter; 
      }
   }
  

  注意不要在构造函数里给这个值加const，加const声明的是构造函数内部的局部变量，不会挂载到组件实例上，render方法通过this访问不到。

• 模块级常量写法（性能最优，固定模板推荐使用）
  你定义的这个JSX模板完全不依赖组件的props、state，是固定不变的内容，完全可以提到类外部作为模块常量声明：

  // 模块顶层作用域可以正常使用const声明
  const TEMPLATE_COUNTER = (<div><h1>Counter Component</h1><p>count : 0 </p></div>);
  class Counter extends React.Component{
     render(){
          return TEMPLATE_COUNTER; 
      }
   }
  

  这种写法不需要额外Babel插件，所有组件实例还会复用同一个模板对象，不会每次实例化都重新创建JSX节点，性能更好。

注意：不要试图在类的顶层方法外直接写普通变量声明，不管是const、let还是var，在类的语法规则里都是非法的。

内容的提问来源于stack exchange，提问作者Prabhat Yadav