0
点赞
收藏
分享

微信扫一扫

react-hook 父子间传值(forwardRef+useImperativeHandle)

茗越 2022-01-30 阅读 60

父组件传子组件(props)

// 父组件
import ModelColumns from './index'  //引入子组件ModelColumns
const FatherCom = () => {
    return (
        <div>
        	{/* 传参关键:子组件元素ModelColumns上,自定义一个传给子组件的属性:type */}
            <ModelColumns  type='trace' />
        </div>
    )
}

export default FatherCom
//子组件
//创建一个函数组件  ModelColumns
function ModelColumns(props: any, ref: any) {

//传参关键:使用props接收父组件的参数type
  const { type } = props;
  return (
  	<div>type</div>
  )
}

//默认暴露
export default ModelColumns

子组件传父组件

//父组件
//①引入useRef
import React, {  useRef } from 'react';

//②借助useRef定义一个常量ModelRef 
const ModelRef = useRef(null)

//③在子组件上添加一个ref属性:ModelRef 
<ModelColumns ref={ModelRef} />

//④通过ModelRef.current获取子组件暴露出来的方法或对象
ModelRef.current.ModelColumnsparams
//子组件
//①引入useImperativeHandle forwardRef 
import React, { useImperativeHandle, forwardRef } from 'react';

//②使用useImperativeHandle
//正常情况下 ref 是不能挂在到函数组件上的,因为函数组件没有实例.
//但是 useImperativeHandle 为我们提供了一个类似实例的东西。
//通过 useImperativeHandle 的第 2 个参数,将返回的对象的内容挂载到 父组件的 ref.current 上。

useImperativeHandle(ref, () => {
// ref是对目标元素的引用
//暴露给父组件的方法或对象
    return {
      ModelColumnsparams
    }
 });
举报

相关推荐

0 条评论