React 类组件 this 写法

59 阅读 0 评论 39 点赞

我是靠谱客的博主光亮含羞草，最近开发中收集的这篇文章主要介绍React 类组件 this 写法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

先看一段代码，其 this 指向需要修正

import React from "react";
class Comp extends React.Component {
state = { a: 1 }
handleClick() {
console.log(this, 'handleClick');
// undefined 'handleClick'
this.setState({ a: this.setState.a + 1 })
// 报错 Cannot read properties of undefined (reading 'setState')
}
render() {
return (
<div className="comp">
<span>{this.state.a}</span>
<button onClick={this.handleClick}>click</button>
</div>
)
}
}

上诉代码中是属于在 react 中 this 有问题的写法，在handleClick 方法中 this是 undefined ，所以我们就无法使用 this.setState 去修改 state 数据状态，为什么呢？就因为 this 是 undefined ，你咋去访问 setState 方法。

但是我就是非要这么写，怎么整？

方法1，通过在 constructor 里面修改 this 指向

class Comp extends React.Component {
constructor() {
super()
// console.log(this); 在这里 this 能输出
this.handleClick = this.handleClick.bind(this)
// 强行修改 this 指向
}
state = { a: 1 }
handleClick() {
console.log(this, 'handleClick');
// Comp {props: {…}, context: {…}, refs: {…}, updater: {…}, state: {…}, …} 'handleClick'
this.setState({ a: this.state.a + 1 })
// 该方法能访问使用
}
render() {
return (
<div className="comp">
<span>{this.state.a}</span>
<button onClick={this.handleClick}>click</button>
</div>
)
}
}

方法2，箭头函数写法，访问 render 的 this

下述代码在表达式中通过使用箭头函数来修改 this ，使其指向父级 render函数的 this ，render函数里面的 this 是可以访问的（在其 react 内部就做了修改，指向实例对象），不同于上述的 handleClick

class Comp extends React.Component {
state = { a: 1 }
render() {
return (
<div className="comp">
<span>{this.state.a}</span>
<button onClick={() => this.setState({ a: this.state.a + 1 })}>click</button>
</div>
)
}
}

所以说，别跟这个 this 过意不去，最通用的写法吧，绿色环保，安全无误

class Comp extends React.Component {
state = { a: 1 }
handleClick = () => {
console.log(this, 'handleClick');
// Comp {props: {…}, context: {…}, refs: {…}, updater: {…}, state: {…}, …} 'handleClick'
this.setState({ a: this.state.a + 1 })
}
render() {
return (
<div className="comp">
<span>{this.state.a}</span>
<button onClick={this.handleClick}>click</button>
</div>
)
}
}