react通过hook实现父子组件通信-我爱编程

当前位置：: 首页; 文章; 前端
详情

react通过hook实现父子组件通信

前端
三生万物
0

父组件：Parent.tsx，定义childrenRef

import React, { useRef } from "react"

const Parent = (props: any) => {
  const childrenRef = useRef<any>()

  const handleClick = () => {
    childrenRef.current.changeName('tom')
  }

  return <div>
            <Children ref={childrenRef}></Children>
            <button type="button" onClick={handleClick}>改变子组件name</button>
          </div>
}

export default Parent

子组件：Children.tsx，使用 useImperativeHandle暴露操作，然后返回 forwardRef 式组件

import React, { useState, useImperativeHandle, forwardRef } from "react"

const Children = forwardRef((props: any, ref: any) => {
  const [name, setName] = useState<string>('')

  useImperativeHandle(ref, () => { // 对外暴露操作
    return {
      changeName(name: string) {
        setName(name)
      }
    }
  })

  return <div>{name}</div>
})

export default Children

更多父子组件通信方式：https://react.fenxianglu.cn/docs/communication

免责申明：本站发布的内容（图片、视频和文字）以转载和分享为主，文章观点不代表本站立场，如涉及侵权请联系站长邮箱：xbc-online@qq.com进行反馈，一经查实，将立刻删除涉嫌侵权内容。