时间戳

首页 > 解决方案 > 使用 `useImperativeHandle` 导出 ref

reactjs - 使用 `useImperativeHandle` 导出 ref

问题描述

我有 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} />
   )
}

我可以添加 refRefFile来useImperativeHandle从 B 调用它吗？我认为这样做对我来说会更舒服。或者有没有其他方法可以解决这个问题？谢谢！

标签： reactjsreact-native

解决方案

你可以做这样的事情。

Let,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。像这样，希望你能随心所欲地处理它。如果您有任何问题，请随时在此处发表评论。

推荐阅读