需要用到的几个关键字:useRef,useImperativeHandle,.current,forwardRef
注意,如果直接在子组件上使用useRef,是拿不到想要的数据的。
官网解释:refs 将不会透传下去。这是因为 ref
不是 prop 属性。就像 key
一样,其被 React 进行了特殊处理。如果你对 HOC 添加 ref,该 ref 将引用最外层的容器组件,而不是被包裹的组件。我们可以使用 React.forwardRef
API 明确地将 refs 转发到内部的 FancyButton
组件。React.forwardRef
接受一个渲染函数,其接收 props
和 ref
参数并返回一个 React 节点。
父组件:
import { useRef } from 'react'
import Child from './components/Child/Child'
const Father = () =>{
const childRef = useRef(null)
const fatherClick = () => {
childRef.current.setData()
}
return (
<div>
<Child
ref={childRef}
/>
<div onClick={fatherClick}>点击触发子组件事件</div>
</div>
)
}
export default Father
子组件:需要useImperativeHandle
及forwardRef
import { useImperativeHandle,forwardRef } from 'react'
const Child = (props,ref) => { // 第一个props是其他的一些传值,第二个ref是父组件传递的ref属性
useImperativeHandle(ref, () => ({ // 第一个ref是父组件传递的ref属性,第二个返回一个对象,供父组件.current调用
setData: (params: any) => {
// 搞事情
}
}))
}
export default forwardRef(Child)
useImperativeHandle
:可以只暴露特定的操作,返回对象给父组件去操作;
forwardRef
:通过forwardRef可以将ref转发给子组件