react hook 父调用子的方法useRef

最新推荐文章于 2023-01-04 15:59:36 发布

周末笔记

最新推荐文章于 2023-01-04 15:59:36 发布

阅读量351

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_40016215/article/details/124991559

版权

子组件通过`useImperativeHandle`抛出方法

import React, { forwardRef, useImperativeHandle } from 'react'
import { Button } from 'antd'
export default function Category() {
  const domRef = React.useRef()
  const handleClick = () => {
    // @ts-ignore
    domRef.current.handleClick()
  }
  return (
    <div style={{}}>
      Category
      <Button type="primary" onClick={handleClick}>
        父组件的按钮
      </Button>
      <Child ref={domRef}>这是子组件...</Child>
    </div>
  )
}
// 实现一个组件的引用
export const Child = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    handleClick,
  }))
  const handleClick = () => {
    console.log('子组件的按钮被点击了')
  }
  // @ts-ignore
  return <div>{props.children}</div>
})