Использование useImperativeHandle для экспорта ссылки

Question

У меня есть 2 следующих файла, называемых A.js и B.js.

A.js

import RefFile from './components/RefFile'

const A = forwardRef((props, ref) => {
   let refRefFile = useRef(null)
   ...

   useImperativeHandle(ref, () => ({
      refRefFile
   }))
   
   return (
      ...
      <RefFile ref={refRefFile} />
      ...
   )
}

B.js

import A from './A'

const B = () => {
   let refA = useRef(null)

   const test = () => {
      refA?.refRefFile()
   }

   return (
      <A ref={refA} />
   )
}

Могу ли я добавить ссылку RefFile в useImperativeHandle, чтобы вызвать его из B? Думаю, мне так будет удобнее. Или есть альтернативный способ решить эту проблему? Спасибо!

Answer 1

Вы можете сделать что-то вроде этого.

Пусть, foo() - это функция в вашем RefFile.

A.js

import RefFile from './components/RefFile'

const A = forwardRef((props, ref) => {
   let refRefFile = useRef()
   ...

   const accessRefFileFoo = () => refRefFile.foo()

   useImperativeHandle(ref, () => ({
      accessRefFileFoo
   }))
   
   return (
      ...
      <RefFile ref={refRefFile} />
      ...
   )
}

B.js

import A from './A'

const B = () => {
   let refA = useRef()

   const test = () => {
      refA.accessRefFileFoo()
   }

   return (
      <A ref={refA} />
   )
}

Здесь вы вызываете функцию с именем foo(), которая является функцией в вашем RefFile, из вашего компонента B. Надеюсь, вы справитесь с этим так, как хотите. Если у вас возникли проблемы, не стесняйтесь комментировать здесь.