React类组件中如何定义可在类内方法访问修改的变量？

你的三种写法为什么无效？ #

• let/var不能直接在类的顶层作用域声明实例变量，这不符合JS类的语法规则，导致变量无法被类实例访问。
• static声明的是类静态变量，它属于类本身而非单个实例，你在componentDidMount或实例方法里通过this.tureValue访问自然会得到undefined（得用DataBlock3.tureValue才能访问），而且静态变量是所有实例共享的，显然不符合你每个实例独立维护变量的需求。

两种正确的实现方式 #

方法1：在构造函数中挂载到this上 #

这是传统且兼容性好的写法，适合需要在构造阶段初始化的变量：

class DataBlock3 extends Component<IProps, Db3stateInterface> {
  constructor(props) {
    super(props);
    // 将变量挂载到this上，成为实例属性
    this.tureValue = null;
  }

  componentDidMount() {
    // 访问并修改变量
    this.tureValue = "新值";
    console.log(this.tureValue);
  }

  onChangeHandler() {
    // 事件处理函数中同样可以操作
    this.tureValue = "修改后的值";
  }
}

方法2：类字段直接声明（ES6+语法） #

如果你的项目支持ES类字段语法（目前大部分React+TS项目都支持），可以直接在类顶层声明，不用写在构造函数里：

class DataBlock3 extends Component<IProps, Db3stateInterface> {
  // 直接声明实例变量，不需要加let/var
  tureValue = null;

  componentDidMount() {
    this.tureValue = "初始化完成后的值";
  }

  onChangeHandler() {
    this.tureValue = "处理事件后的新值";
  }
}

额外提醒 #

• 用TypeScript的话，建议给变量加上类型注解，比如tureValue: string | null = null;，避免类型报错。
• 区分实例变量和组件state：如果变量变化需要触发组件重新渲染，那应该把它放到state里（用this.setState修改）；如果不需要触发渲染，用上述实例变量的方式就够了。

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