zoukankan      html  css  js  c++  java
  • react 父级调用子级方法

    忙里偷闲,先记下来写个大概,反正就是把代码复制跑一遍就知道怎么用了

    父级代码:

    import React, { useRef } from 'react';
    import HelloWorld2 from '@/components/HelloWorld/HelloWorld2';
    const Test2 =(props)=> {
      const test1 = () => {
        console.log("父组件准备调用子组件方法");
        userQqq.current.getName();
      };
        const userQqq = useRef(); // 命名最好还是user开头
        return (
        <div>
          <button onClick={test1}>调用子组件方法getName</button>
                <HelloWorld2 ref={userQqq}/>
        </div>
      )
    }
    export default Test2;

    子级代码:

    import React, { forwardRef, useImperativeHandle } from 'react';
    // 子组件不再使用react的React方式来创建,
    // 直接通过函数的方式创建,函数子组件接收两个参数,
    // 第一个参数是父组件传过来的其它参数,第二个参数是ref
    const HelloWorld2 = (props, ref) => {
      const getName = () => {
        console.log("子组件方法");
      };
      // react规定必须使用useImperativeHandle方法,
      // 来保存并抛出想要传递给父组件的方法或者数据,
      // 第一个参数是ref,第二个参数是函数,返回想要抛出的对象集合
      useImperativeHandle(ref, () => ({
        getName,
      }));
      return (
        <div>子组件</div>
      );
    };
    //必须通过forwardRef方法抛出函数组件
    export default forwardRef(HelloWorld2);
  • 相关阅读:
    学习日记(2.19 BP神经网络完整代码解读)
    学习日记(2.18)
    学习日记2.17
    学习日记(2.15---2.16)
    最后的作业
    C++第五次作业
    第四次作业:结对编程
    C++第四次作业
    第三次作业:原型设计
    conda基本操作
  • 原文地址:https://www.cnblogs.com/konghaowei/p/13985209.html
Copyright © 2011-2022 走看看