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中的函数。这样，希望您能够根据需要进行处理。如果您有任何问题，请随时在此处评论。

使用`useImperativeHandle`导出引用

1 个答案: