React父组件获取子组件数据和方法

4,305 阅读1分钟

1、useRef 绑定子组件

在父组件中通过调用 useRef() 获取到一个对象,然后将该对象通过 ref 属性绑定到子组件身上:

import { useRef } from 'react'
export default function Categories(){  
    const childRef = useRef();   
    return (   
    <CategoriesAdd ref={childRef}></CategoriesAdd>  
    )}

2、forwardRef 处理子组件

import { forwardRef  } from 'react'
function CategoriesAdd() {
}
export default forwardRef(CategoriesAdd);

3、useImperativeHandle 返回数据或方法给父组件

import { useImperativeHandle } from 'react'
function CategoriesAdd(props, ref) {    
    useImperativeHandle(ref, () => {        
    return {            自定义属性名: 想要传递给父组件的数据或方法        }    })
    }
    export default forwardRef(CategoriesAdd);

4、父组件获取子组件的数据或方法

console.log(childRef.current.自定义属性名)