如何访问函数组件中的类组件方法?

Question

我正在尝试访问函数组件中的类组件方法。我已经阅读了几个小时，但我错过了一些东西。

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

正如文档中所读到的，我可以引用类组件：

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

然后我可以使用这样的方法：

this.pond.addFiles();

但是我不能在我的函数中使用该方法，因为"this"不能在函数中使用。

类型错误：无法设置未定义的属性"池塘">

我虽然使用Ref钩子可以提供帮助，但它仅适用于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 将创建一个 ref。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，但我认为它应该看起来像这样：

import React from 'react';
import { FilePond } from "react-filepond";
const Example = () => {
const filePondRef = useRef(null);
// you should be able to use filePondRef (filePondRef.current) instead of "this.pond"
return(
<FilePond ref={filePondRef} />
)
}

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