Question

我正在尝试访问功能组件内部的类组件方法。我已经读了几个小时了，但是我想念一些东西。

确切地说，我正在尝试访问Filepond组件（https://pqina.nl/filepond/docs/patterns/frameworks/react/）的方法（addFiles）

如文档中所述，我可以引用类组件：

<FilePond ref={ref => this.pond = ref}/>

然后我可以使用如下方法：

this.pond.addFiles();

但是我不能在我的Function中使用该方法，因为'this'不能在Function中使用。

TypeError：无法设置未定义的属性“ pond”

尽管useRef挂钩可以提供帮助，但它仅适用于html元素。

import React from 'react';
import { FilePond } from "react-filepond";

const Example = () => {

   //How can I use this.pond.addFiles() here?

   return(
      <FilePond ref={ref => this.pond = ref} />
   )
}

谢谢您的帮助。

Answer 1

UseRef将创建一个引用。 useRef Hook是一个函数，它返回一个可变的ref对象，该对象的.current属性已初始化为传递的参数（initialValue）。返回的对象将在组件的整个生命周期中保持不变。

const refContainer = useRef(initialValue);

您可以使用此代码

import React, { useRef } from 'react';
import { FilePond } from "react-filepond";

const Example = () => {
  const file = useRef(null);

   // Use file.current.addFiles() instead of this.pond.addFiles();

   return(
      <FilePond ref={file} />
   )
}

Answer 2

我不经常使用useRef，但我认为它应该像这样：

# print(df)
                                            response                       short
0  {'error': 0, 'short': 'http://192.168.42.72/EC...  http://192.168.42.72/ECyKY
1  {'error': 0, 'short': 'http://192.168.42.72/Is...  http://192.168.42.72/IsMgE

来源：https://reactjs.org/docs/hooks-reference.html#useref

如何访问功能组件中的类组件方法？

2 个答案: