React.js中函数与类混淆问题：定位下列代码的错误

开发者阿泽

2026-8-27

代码问题定位

这段类组件代码的语法错误本质是混淆了函数组件和类组件的变量声明规则：在ES6类的主体内部非法使用了const关键字声明属性。

错误原因

JavaScript类语法规定，const/let/var这类变量声明关键字只能在函数、代码块作用域内使用，不能直接写在类的主体层级。
你写的const arrayOfNumbers = _.range(1, 10);是普通作用域下的变量声明写法，直接放在类体中会直接触发语法解析错误，是刚接触类组件的开发者很容易踩的写法混淆问题。

可行的修复方案

根据业务场景可以选以下任意一种写法：

类实例属性写法（React项目配Babel转译的场景下最常用），直接删掉const关键字即可，属性会挂载到组件实例上，通过this.arrayOfNumbers访问：

class Numbers extends React.Component {
  arrayOfNumbers = _.range(1, 10);

  render() {
    return <div>{/* 业务逻辑里通过this.arrayOfNumbers取值 */}</div>
  }
}

原生ES6标准构造函数写法，不需要额外转译支持，属性同样挂载到组件实例：

class Numbers extends React.Component {
  constructor(props) {
    super(props);
    this.arrayOfNumbers = _.range(1, 10);
  }

  render() {
    return <div>{/* 业务逻辑里通过this.arrayOfNumbers取值 */}</div>
  }
}

类外部常量写法，如果这个数组不需要依赖组件实例的props、state等可变数据，推荐这种写法，所有组件实例共享同一份数组数据，性能更好：

const arrayOfNumbers = _.range(1, 10);
class Numbers extends React.Component {
  render() {
    return <div>{/* 业务逻辑里直接用arrayOfNumbers即可 */}</div>
  }
}