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()?
  • 相关阅读:
    python pandas groupby
    ORC 资料Mark
    python split() 用法
    Hive 中的变量
    特征选择方法
    Introduction to SIFT (Scale-Invariant Feature Transform)
    SIFT 、Hog 、LBP 了解
    python None 和 NaN
    判断特征中是否含有空值、空值填充
    vue 子组件引用
  • 原文地址:https://www.cnblogs.com/shine1234/p/13223391.html
Copyright © 2011-2022 走看看