react-父组件访问子组件中的方法和state（函数组件使用ref）

最新推荐文章于 2024-08-06 09:56:19 发布

前端_小栗子

最新推荐文章于 2024-08-06 09:56:19 发布

阅读量2.1k

点赞数

分类专栏： js react

本文链接：https://blog.csdn.net/weixin_46554760/article/details/124585264

版权

React forwardRef useImperativeHandle 父子组件通信数据传递

关键词由CSDN通过智能技术生成

js 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

react

6 篇文章 0 订阅

订阅专栏

函数组件中：父组件想要访问子组件中的方法和数据；

子组件使用forwardRef做转发，使用useImperativeHandle把方法暴漏出去，在父组件中即可访问到；

子组件代码示例

import { useImperativeHandle, forwardRef } from 'react';
const Children = forwardRef((props, ref) => {
    useImperativeHandle(ref, () => ({
        getList: (params = {}) => {
        getDataList(params);
        },
    }));

    const getDataList = (params) => {
        console.log('父组件传入的参数:',params)
    }
}

父组件代码示例

    import { useRef } from 'react';
    let ChildrenRef = useRef();
    const handleList = () => {
        tableRef.current.getList({value:'我是一个参数123'});
    }
    return (
        <div>
            <Children ref={ChildrenRef} />
            <button onClick={handleList}>调用子组件的方法</button>
        </div>
    )