如何将useState实现的登录token逻辑改写为React类组件版本

你的改写思路完全正确，只需要调整1个细节、补全类组件的标准结构即可正常运行：

可直接复用的完整实现 #

import React, { Component } from 'react';
import Login from './Login'; // 替换为你实际的Login组件引入路径

class YourRootComponent extends Component {
  // state初始化逻辑和你的写法一致
  state = {
    token: null
  }

  // 更新token的方法和你写的newToken逻辑完全等价，这里调整了命名和原hooks写法对齐
  setToken = (newTokenVal) => {
    this.setState({ token: newTokenVal })
  }

  render() {
    const { token } = this.state;
    // 鉴权逻辑和原hooks写法完全等价
    if (!token) {
      // 注意这里的props命名要和Login组件内部调用的命名对齐：
      // 如果你用的是教程里的Login组件，内部调用props.setToken传值，就传setToken
      // 如果你自己写的Login组件内部调用props.onChange传值，就传onChange
      return <Login setToken={this.setToken} />
    }

    // 这里返回你原有应用的正常内容
    return (
      <div>
        原有React应用的主内容
      </div>
    )
  }
}

export default YourRootComponent;

你原有写法的注意点 #

你写的更新逻辑、state初始化、鉴权判断都没有问题，唯一需要确认的是传递给Login组件的props命名：如果Login组件内部是通过props.setToken()把生成的token传递到父组件，那你原来写的onChange={this.newToken}会因为props名不匹配报错，改成和组件内部调用一致的命名即可。

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