Как я могу получить доступ к методу компонента класса в функциональном компоненте? - PullRequest
Новая
       84

Как я могу получить доступ к методу компонента класса в функциональном компоненте?

1 голос
/ 19 июня 2020

Я пытаюсь получить доступ к методу компонента класса внутри функционального компонента. Я читаю несколько часов, но чего-то не хватает.

Если быть точным, я пытаюсь получить доступ к методу (addFiles) компонента Filepond (https://pqina.nl/filepond/docs/patterns/frameworks/react/)

Как написано в документации, я могу указать компонент класса: 

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

И затем я могу использовать такой метод: 

this.pond.addFiles();

Но я могу ' Я использую этот метод в своей функции, потому что 'this' не может использоваться в функции.

TypeError: невозможно установить свойство 'pond' равным undefined

Хук 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} />
   )
}

Спасибо за вашу помощь.

Ответы [ 2 ]

2 голосов
/ 19 июня 2020

UseRef создаст ссылку. Хук useRef - это функция, которая возвращает изменяемый объект 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} />
   )
}
1 голос
/ 19 июня 2020

Я не так часто работаю с 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

...