React类组件中如何使用useToken Hook获取token？

你遇到的错误是因为React Hook只能在函数组件或自定义Hook的顶层调用，类组件里直接调用useToken违反了Hook的规则，所以会报语法错误。下面给你几种可行的解决办法：

方法一：把类组件转为函数组件（推荐） #

React官方现在更推荐函数组件+Hook的写法，直接把MyKnownDevices改成函数组件，就能正常使用useToken了：

import React from 'react';
import { useToken } from './path-to-useToken';

const MyKnownDevices = () => {
  const { token, userObject } = useToken();

  return (
    <div>
      {/* 这里使用token和userObject */}
      <p>当前token: {token}</p>
    </div>
  );
};

export default MyKnownDevices;

方法二：用高阶组件（HOC）包裹类组件 #

如果不想修改类组件的结构，可以写一个高阶组件，在HOC里调用useToken，再把token作为props传给类组件：

// 先定义高阶组件
import React from 'react';
import { useToken } from './path-to-useToken';

const withToken = (WrappedComponent) => {
  return (props) => {
    const { token, userObject } = useToken();
    return <WrappedComponent {...props} token={token} userObject={userObject} />;
  };
};

// 用HOC包裹你的类组件
class MyKnownDevices extends React.Component {
  render() {
    const { token, userObject } = this.props;
    return (
      <div>
        <p>当前token: {token}</p>
      </div>
    );
  }
}

export default withToken(MyKnownDevices);

方法三：通过Context获取（如果useToken基于Context实现） #

如果你的useToken Hook是基于React Context封装的，类组件可以直接通过contextType来获取Context里的token：

假设你的TokenContext定义如下：

import { createContext, useContext } from 'react';

const TokenContext = createContext();

// 原useToken Hook
export const useToken = () => {
  return useContext(TokenContext);
};

那在类组件里可以这样使用：

import React from 'react';
import { TokenContext } from './path-to-token-context';

class MyKnownDevices extends React.Component {
  static contextType = TokenContext;

  render() {
    const { token, userObject } = this.context;
    return (
      <div>
        <p>当前token: {token}</p>
      </div>
    );
  }
}

export default MyKnownDevices;

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