React Hook 父子组件相互调用函数方式

目录
  • React Hook 父子组件相互调用函数
    • 1.子组件调用父组件函数方法
    • 2.父组件调用子组件函数方法
  • React Hook 父子组件传值
    • 父组件
    • 子组件

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()?

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 (
    <div>
      <h4>我是父组件</h4>
      <p>点击了 {count} 次!</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        点我
      </button>
      {/* 关键代码 */}
      {/* 提供器 */}
      <myContext.Provider value={count}>
        <Counter myContext={myContext} />
      </myContext.Provider>
    </div>
  );
}
export default App;

子组件使用useContext ，来获取父级组件传递过来的context值。

子组件

import React, { useContext} from 'react';
// 关键代码
function Counter({myContext}) {
    const count = useContext(myContext);  // 得到父组件传的值
    return (
        <div>
            <h4>我是子组件</h4>
            <p>这是父组件传过来的值：{count}</p>
        </div>
    )
}
export default Counter;

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • React 非父子组件传参的实例代码

    React 是一个用于构建用户界面的 JAVASCRIPT 库. React 主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图). React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源. React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它. React 特点 1.声明式设计 −React采用声明范式,可以轻松描述应用. 2.高效 −React通过对DOM的模拟,最大限度地减少与DOM的

  • React中父子组件通信详解

    目录 父组件向子组件通信 存在期 父组件向子组件通信 在父组件中,为子组件添加属性数据,即可实现父组件向子组件通信.传递的数据可以分成两类 子组件是作为属性来接收这些数据的 第一类就是数据:变量,对象,属性数据,状态数据等等 这些数据发生改变,子组件接收的属性数据就发生了改变. 第二类就是方法:父组件可以向子组件传递属性方法,子组件接收方法,并可以在组件内执行,有两种执行方式 注意:父组件传给子组件的方法是不能执行的,执行了相当于将方法的返回值传递给子组件. 第一种 作为事件回调函数执行 参数默

  • 关于react 父子组件的执行顺序

    关于react 父子组件的执行顺序

    目录 react父子组件的执行顺序 1.class组件 2.函数组件  hooks无依赖的情况 react父子组件的执行顺序 react版本:17.x,在此版本中完全可以用Hooks去进行开发了,开始先讲class组件,只是为了更好的帮助理解. 在开发项目的过程中,由于项目比较大,拆分组件的结构比较复杂,会涉及到一个组件中下面嵌套了好几级的子级组件,这里就涉及到父子组件中生命周期的执行顺序的问题: 本文主要讲两种情况,class组件和函数组件,讲一下执行常用到的生命周期的执行顺序: 1.clas

  • React父子组件传值(组件通信)的实现方法

    目录 1.父组件传值子组件 2.子组件传值父组件 3.兄弟组件传值 1.父组件传值子组件 在引用子组件的时候传递,相当于一个属性,例如:在子组件内通过porps.param获取到这个param的值. 父组件向子组件传值,通过props,将父组件的state传递给了子组件. 父组件代码片段: constructor(props){ super(props) this.state={ message:"i am from parent" } } render(){ return( <

  • 解析React ref 命令代替父子组件的数据传递问题

    解析React ref 命令代替父子组件的数据传递问题

    前言 我们在谈论受控组件的时候,会去使用父子通信的方式去进行数据传递,从而达到组件的受控,其实并非这一种方案,当我们对表单组件进行受控处理的时候,往往会使用 ref 命令去进行数据传递,使用传统的父子通信当然可以实现,只不过对于表单组件来说,ref 更加的便捷 使用父子通信解决表单域的数据传输问题 既然说是表单域组件,那么我们就写一个表单域组件出来 import React, { Component } from 'react'; import Field from './Field'; exp

  • 关于antd tree 和父子组件之间的传值问题(react 总结)

    关于antd tree 和父子组件之间的传值问题(react 总结)

    项目需求:点击产品树节点时获取该节点的所有父节点,同时回填表格的搜索条件,完成搜索功能,搜索结果展示在下方的table中. 写了三个组件: 现在有个业务场景交互:在orderTree组件中点击树节点,获取当前节点以及所有的父节点的Id 放入一个对象arrKeys中,并在orderForm组件中使用(回填类型下拉选择框,objId对象作为查询接口的入参) 现在可以分部解决问题: 1.首先获取点击的树节点以及所有父节点的id ---arrKeys 2.在点击树节点获取当前节点以及所有父级节点之后,通

  • React Hook 父子组件相互调用函数方式

    目录 React Hook 父子组件相互调用函数 1.子组件调用父组件函数方法 2.父组件调用子组件函数方法 React Hook 父子组件传值 父组件 子组件 React Hook 父子组件相互调用函数 1.子组件调用父组件函数方法 //父组件 let Father=()=>{     let getInfo=()=>{              }     return ()=>{         <div>             <Children       

  • React Hook父组件如何获取子组件的数据/函数

    目录 React Hook父组件获取子组件数据/函数 子组件MyWorldMap 父组件MyTrip React Hook父组件提交子组件form 父组件 子组件 React Hook父组件获取子组件数据/函数 我们知道在react中,常用props实现子组件数据到父组件的传递,但是父组件调用子组件的功能却不常用. 文档上说ref其实不是最佳的选择,但是想着偷懒不学redux,在网上找了很多教程,要不就是hook的讲的太少,要不就是父子组件傻傻分不清,于是只好再啃了一下文档,就学了一下其它hoo

  • Vue.js 父子组件通信的十种方式

    面试官:Vue 中父子组件通信有哪些方式? 自己先想一分钟. 无可否认,现在无论大厂还是小厂都已经用上了Vue.js 框架,简单易上手不说,教程详尽,社区活跃,第三方套件还多.真的是前端开发人员必备技能.而且在面试当中也往往会问到关于 Vue 方面的各种问题,其中大部分面试官会问到如上这种问题. 最近一直在做 Vue项目代码层面上的优化,说实话,优化别人的代码真是件痛苦的事情,功能实现尚且不说,就说代码规范我就能再写出一篇文章来.真的是无规范不成方圆,规范这个东西太重要了!有点扯了,回到主题,咳

  • Vue2.x中的父子组件相互通信的实现方法

    Vue2.x中的父子组件相互通信的实现方法

    业务场景:(这里指的是直接父子级关系的通信) 美女(子组件)将消息发送给大群(父组件) 大群(父组件)收到美女发送的消息后再回个信息给美女(子组件) 父组件 template <template> <div> <p>群消息girl:</p> <div> {{ somebody }} 说: 我 {{ age }} 了. </div> <hr> <v-girl-group :girls="aGirls"

  • python def 定义函数,调用函数方式

    python def 定义函数,调用函数方式 def sum_2_nums(a,b): #def 定义函数 result = a+b print('%d+%d=%d'%(a,b,result)) num1 = int(input('请输入第一个数字:')) num2 = int(input('请输入第二个数字:')) sum_2_nums(num1,num2) #调用函数 定义和调用的函数,1:个数相同 :2:顺序 一 一对应 这样才能正确实现 补充知识:python中list作为全局变量无需g

  • react.js 父子组件数据绑定实时通讯的示例代码

    react.js我自己还在摸索学习中,碰到父子组件数据绑定实时通讯的问题,研究了一下,分享给大家,也给自己留个笔记: import React,{Component} from 'react' import ReactDOM from 'react-dom' class ChildCounter extends Component{ render(){ return( <div style={{border:'1px solid red'}}> {this.props.count} </

  • 详解React之父子组件传递和其它一些要点

    react是R系技术栈中最基础同时也是最核心的一环,2年不到获取了62.5k star(截止到目前),足可见其给力程度.下面对一些react日常开发中的注意事项进行罗列. React的组件生命周期 react主要思想是构建可复用组件来构建用户界面.在react里面一切皆组件.每个组件里面都是有自己的生命周期,这个生命周期规定了组件的状态和方法,分别在哪个阶段执行.下面附上一张React的生命周期图: 组件第一阶段:初始化.渲染以及装载完成: 组件第二阶段:组件运行时候的状态 ①:状态变化引发组件

  • React hook实现简单的websocket封装方式

    目录 React hook实现websocket封装 react自定义hook解决websocket连接,useWebSocket 1.描述 2.代码 React hook实现websocket封装 新建websocket.ts文件 import {useState, useRef, useEffect} from 'react' const useWebsocket = ({ url:string, verify }) => {     const ws = useRef<WebSocket

随机推荐