zoukankan      html  css  js  c++  java
  • React Hook 父子组件相互调用方法

    1.子组件调用父组件函数方法

    //父组件
    let Father=()=>{
        let getInfo=()=>{
            
        }
        return ()=>{
            <div>
                <Children 
                    getInfo={getInfo}
                />
            </div>
        }
    }
    //子组件
    let Children=(param)=>{
        return ()=>{
            <div>
                <span onClick={param.getInfo}>调用父组件函数</span>
            </div>
        }
    }

    子组件调用父组件函数,可以向父组件传参,刷新父组件信息

    2.父组件条用子组件函数方法

    //父组件
    //需要引入useRef
    import {useRef} from 'react'
    let Father=()=>{
        const childRef=useRef();
        let onClick=()=>{
            childRef.current.getInfo();
        }
        return ()=>{
            <div>
                <Children 
                    ref={childRef}
                />
                <span onClick={onClick}>调用子组件函数</span>
            </div>
        }
    }
    //子组件 
    //需要引入useImperativeHandle,forwardRef
    import {useImperativeHandle,forwardRef} from 'react'
    let Children=(ref)=>{
        useImperativeHandle(ref, () => ({
            getInfo:()=>{
                //需要处理的数据
            }
        }))
        return ()=>{
            <div></div>
        }
    }
    Children = forwardRef(Children);

    useImperativeHandle 需要配合着 forwardRef 使用,要不就会出现以下警告

    Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
    

      

    参考:https://www.cnblogs.com/shine1234/p/13223391.html

  • 相关阅读:
    Java显示指定类型的文件
    Mysql B-Tree, B+Tree, B*树介绍
    java海量大文件数据处理方式
    RandomAccessFile读取文本简介
    ConcurrentHashMap1.7和1.8的不同实现
    Java并发中的CopyOnWrite容器
    Java阻塞队列的实现
    JVM之Java虚拟机详解
    Spring AOP的实现原理
    SpringMVC工作原理
  • 原文地址:https://www.cnblogs.com/art-poet/p/13269408.html
Copyright © 2011-2022 走看看