如何用 class 组件重写 useRef？

Question

我需要获取 JSON 格式的集成信息，我需要帮助将 useRef（功能组件）转换为 createRef（class 组件）。功能组件：

import { createTTNCClient } from '~/shared/clients/ttnc';

const DevicesTable: React.FC<Props> = (props) => {
        const TTNCClient = useRef(createTTNCClient());
          const fetchIntegrations = async (): Promise<Integration[]> => {
        try {
          const resp = await TTNCClient.current.getIntegrations();      
          return resp.data.content;
        } catch (err) {
          throw new Error(err);
        }
      };
    }

我尝试制作一个 Class 组件：

export class DevicesTable extends React.PureComponent<Props> {
  private TTNCClientRef: React.RefObject<any>;

  constructor(props) {
    super(props);
    this.TTNCClientRef = React.createRef();
  }
render() {
   const TTNCClient = this.TTNCClientRef.current.getIntegrations(); 
     
    const fetchIntegrations = async (): Promise<Integration[]> => {
      try {
        const resp = await TTNCClient;
        console.log(resp.data.content)
        return resp.data.content;
        } catch (err) {
        throw new Error(err);
        }
    };
 }
   return (
   <div></div>
 )
}

但是它抛出关于函数 getIntegrations() 的错误。我猜是因为我没有在 class 组件中添加 'createTTNCClient' 。这是功能组件的外观：

const TTNCClient = useRef(createTTNCClient());

但我不知道如何在 class 组件中将“createTTNCClient()”添加到“createRef”。

Answer 1

您的 class 组件代码似乎没有调用 createTTNCClient 构造函数。

您可能可以在 class 构造函数中执行此操作：

constructor(props) {
  super(props);
  this.TTNCClientRef = React.createRef();

  this.TTNCClientRef.current = createTTNCClient();
}

或者在componentDidMount生命周期方法中：

componentDidMount() {
  this.TTNCClientRef.current = createTTNCClient();
}

作为预防措施，在尝试调用时应用一些 null-checks：

const TTNCClient = this.TTNCClientRef.current?.getIntegrations();

如何用 class 组件重写 useRef？

How can I rewrite useRef with class component?

javascript

reactjs

react-hooks

create-ref