1在父组件外部定义变量A创建上下文,2在父组件使用变量A<A.Provider> <子组件/> </A.Provider> ,3.在子组件中创建变量使用useContext(),把定义变量返回出去

import React, { useState,createContext,useContext } from 'react'
let contContext = createContext()
// let ageContest = createContext() const SonContext =()=>{ // let age = 19
let count = useContext(contContext)
return(
<>
{count}
</>
)
}
const UseContext = ()=>{ const [count ,usecount] = useState(0)
return(
<div>{count}
<button onClick={()=>{
usecount(count+1)
}}>usecount</button>
<contContext.Provider value={count} >
<SonContext />
<Son2CountContext />
</contContext.Provider>
</div>
)
}
export default UseContext

useContext 解决函数父子组件传值的更多相关文章

  1. 使用react进行父子组件传值

    在单页面里面,父子组件传值是比较常见的,之前一直用vue开发,今天研究了一下react的父子组件传值,和vue差不多的思路,父组件向子组件传值,父通过初始state,子组件通过this.props进行 ...

  2. 创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值

    1.创建组件的方法   函数组件   class组件 1.1 函数组 无状态函数式组件形式上表现为一个只带有一个 `render()` 方法的组件类,通过函数形式或者 `ES6` 箭头 `functi ...

  3. React创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值

    创建组件的方法,组件的props属性.state属性的用法和特点,父子组件传值,兄弟组件传值 1.react组件 1.1.创建组件的方法 1.1.1.函数组件 定义一个组件最简单的方式是使用JavaS ...

  4. angular 4+中关于父子组件传值的示例

    home.component.ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-hom ...

  5. 一个故事讲懂vue父子组件传值

    作者:李佳明同学链接:https://www.jianshu.com/p/2272b6ca0f0c 一个故事讲懂vue父子组件传值 讲故事前先讲代码 父组件向子组件传值 父组件数据传递给子组件可以通过 ...

  6. Vue组件传值(二)之 非父子组件传值

    Vue中非父子组件之间是如何实现通信的? 本章主要讲的是非父子组件传值,父子组件传值请看上一篇文章. 1.创建新的Vue实例引入项目中,通过$emit.$on来实现非父子组件传值: 1 <!DO ...

  7. Angular 父子组件传值

    Angular 父子组件传值 @Input  @Output  @ViewChild 新建一个头部组件 newsheader 在主组件引用 news 组件,在news组件添加 newsheader 组 ...

  8. vue 非父子组件传值

    /*非父子组件传值 1.新建一个js文件 然后引入vue 实例化vue 最后暴露这个实例 2.在要广播的地方引入刚才定义的实例 3.通过 VueEmit.$emit('名称','数据') 4.在接收收 ...

  9. 【vue】父组件主动调用子组件 /// 非父子组件传值

    一  父组件主动调用子组件: 注意:在父组件使用子组件的标签上注入ref属性,例如: <div id="home"> <v-header ref="he ...

随机推荐

  1. NOI-Online一日游(小炒肉心态爆炸记)

    提高组 早上起来赶来机房,逃掉数竟,耶!(光凯:?? T1 It takes me a long time想T1 努力了一个小时的成果 成功码出暴力代码,时间复杂度\(O(n^2)\) 㵘到15分 刑 ...

  2. CodeSys中编程实现串口通讯

    第一步:Linux中启用串口设备.[以树莓派4B为例] 树莓派4B有6个串口,参考上一篇<>,在 /boot/config.txt 中添加一行,开启 uart2 功能:   dtoverl ...

  3. js基础学习-正则表达式

    正则表达式用于对字符串模式匹配及检索替换,是对字符串执行模式匹配的强大工具. 定义的方法: var patt = new RegExp(pattern, modifiers) // var patt ...

  4. CF1709A Three Doors 题解

    题意 有三扇门,每扇门都有一把钥匙与该门上的数字相对应,若数字一样就可以打开. 其中有两扇门后有钥匙,一扇门后为空. 现拥有一把钥匙 \(x\),给出三扇门后的钥匙(若为 \(0\) 即门后没有钥匙) ...

  5. rust里的内存对齐

    内存对齐主要遵循下面三个原则: 结构体变量的起始地址能够被其最宽的成员大小整除 结构体每个成员相对于起始地址的偏移能够被其自身大小整除,如果不能则在前一个成员后面补充字节 结构体总体大小能够被最宽的成 ...

  6. 基于Python3(Autosub)以及Ffmpeg配合GoogleTranslation(谷歌)为你的影片实现双语版字幕(逐字稿)

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_169 为影片加字幕其实是一件非常耗费时间的事情,尤其是对于打字慢的朋友来说.当然不光为影片加字幕,在其他领域,类似的逐字稿也是工作 ...

  7. Odoo14 一些用的熟手的函数

    # Odoo14 一些用的熟手的函数 # from odoo.tools import config # 这是直接访问配置文件,也就是当你执行./odoo-bin -c odoo.cfg的时候 # c ...

  8. 5.4 NOI模拟

    \(5.4\ NOI\)模拟 \(T1\) 想到分讨,但是暴力输出一下方案之后有很多特别的情况要讨论,就弃了... 假设\(a\)是原序列,\(b\)是我们得到的序列 设\(i\)是最长公共前缀,\( ...

  9. 一键到位「GitHub 热点速览 v.22.32」

    作者:HelloGitHub-小鱼干 上上周在 B 站观看了智能键盘--瀚文的制作过程,本周 GitHub 热榜上出现了它的软硬件开源项目 HelloWord-Keyboard,如果你的动手能力强不妨 ...

  10. Dolphin Scheduler 1.2.0 部署参数分析

    本文章经授权转载 1 组件介绍 Apache Dolphin Scheduler是一个分布式易扩展的可视化DAG工作流任务调度系统.致力于解决数据处理流程中错综复杂的依赖关系,使调度系统在数据处理流程 ...