react-hook 父子间传值（forwardRef+useImperativeHandle）

父组件传子组件（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

子组件传父组件

关键：这里用到react中的useRef，forwardRef，useImperativeHandle

//父组件
//①引入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
    }
 });