您现在的位置是:网站首页> 编程资料编程资料
React Hook 父子组件相互调用函数方式_React_
                     2023-05-24
                332人已围观
                
                2023-05-24
                332人已围观
            
简介 React Hook 父子组件相互调用函数方式_React_
React Hook 父子组件相互调用函数
1.子组件调用父组件函数方法
//父组件 let Father=()=>{     let getInfo=()=>{              }     return ()=>{                      //子组件 let Children=(param)=>{     return ()=>{                      调用父组件函数              } }子组件调用父组件函数,可以向父组件传参,刷新父组件信息
2.父组件调用子组件函数方法
//父组件 //需要引入useRef import {useRef} from 'react' let Father=()=>{     const childRef=useRef();     let onClick=()=>{         childRef.current.getInfo();     }     return ()=>{                      //子组件  //需要引入useImperativeHandle,forwardRef import {useImperativeHandle,forwardRef} from 'react' let Children=(ref)=>{     useImperativeHandle(ref, () => ({         getInfo:()=>{             //需要处理的数据         }     }))     return ()=>{              } } 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()?
React Hook 父子组件传值
我司现在技术栈是react,用的是开箱即用的pro,我个人习惯用函数式组件,所以用hook比较多。现在写个父子组件传值的示例,希望能帮助到你。
父组件
import React, { useState,createContext} from "react"; import Counter from './index1' const myContext = createContext(); function App() {   const [count, setCount] = useState(0);   return (            我是父组件
       点击了 {count} 次!
              {/* 关键代码 */}       {/* 提供器 */}                         ); } export default App;子组件使用useContext ,来获取父级组件传递过来的context值。
子组件
import React, { useContext} from 'react'; // 关键代码 function Counter({myContext}) {     const count = useContext(myContext);  // 得到父组件传的值     return (                      我是子组件
             这是父组件传过来的值:{count}
              ) } export default Counter;以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
您可能感兴趣的文章:
                
                
相关内容
- JS前端二维数组生成树形结构示例详解_JavaScript_
- 20个常见的JavaScript数组操作总结_javascript技巧_
- Vue实现简单基础的图片裁剪功能_vue.js_
- ES6学习笔记之let、箭头函数和剩余参数_javascript技巧_
- JS中页面列表加载的常用方法总结_javascript技巧_
- axios请求的一些常见操作实战指南_vue.js_
- 简单聊一聊vue中data的代理和监听_vue.js_
- 在JavaScript中使用高阶函数的方法_javascript技巧_
- React特征Form 单向数据流示例详解_React_
- React特征学习Form数据管理示例详解_React_
 
                                
                                                         
                                
                                                         
                                
                                                         
 
    