React编译报错：类组件中变量声明位置引发编译失败

这个问题本质是ES6类的语法规则在起作用，咱们把原因拆解清楚：

1. 类主体的语法限制 #

ES6的class语法对大括号内部的代码有严格要求：类的主体只能包含类字段（实例/静态属性）、方法定义，不能直接放置普通的变量声明语句（比如var apple = 10;这种独立语句）。

你写的var apple = 10;放在state之后、render之前，属于直接丢在类的主体里，这违反了ES6类的语法规范，所以编译工具（比如Babel）会直接抛出错误。

2. render方法是普通函数作用域 #

render()是类的一个实例方法，方法内部属于标准的JavaScript函数作用域——在函数里你可以自由使用var/let/const声明变量，这完全符合JS的基础语法，自然不会触发错误。

额外小提示：如果想在类实例上存变量怎么办？ #

如果你需要一个和实例绑定的非响应式变量，不用var，直接写成类字段即可：

class App extends Component {
  state = {
    person: [
      {id: "name1n", name: "Rohit", age: 24},
      {id: "name2l", name: "Hariom", age: 23},
      {id: "name3g", name: "Vaibhav", age: 58}
    ],
    someOtherState: "Untouched state",
    showPerson: false
  }
  apple = 10; // 合法的类字段，挂载在实例上，可通过this.apple访问
  render() {
    console.log(this.apple); // 输出10
    // ...其他代码
  }
}

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