[JavaScript知识库] react-父组件访问子组件中的方法和state（函数组件使用ref）

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> react-父组件访问子组件中的方法和state（函数组件使用ref） -> 正文阅读

[JavaScript知识库]react-父组件访问子组件中的方法和state（函数组件使用ref）

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

子组件使用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>
    )