useContext 解决函数父子组件传值
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 解决函数父子组件传值的更多相关文章
- 使用react进行父子组件传值
在单页面里面,父子组件传值是比较常见的,之前一直用vue开发,今天研究了一下react的父子组件传值,和vue差不多的思路,父组件向子组件传值,父通过初始state,子组件通过this.props进行 ...
- 创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值
1.创建组件的方法 函数组件 class组件 1.1 函数组 无状态函数式组件形式上表现为一个只带有一个 `render()` 方法的组件类,通过函数形式或者 `ES6` 箭头 `functi ...
- React创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值
创建组件的方法,组件的props属性.state属性的用法和特点,父子组件传值,兄弟组件传值 1.react组件 1.1.创建组件的方法 1.1.1.函数组件 定义一个组件最简单的方式是使用JavaS ...
- angular 4+中关于父子组件传值的示例
home.component.ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-hom ...
- 一个故事讲懂vue父子组件传值
作者:李佳明同学链接:https://www.jianshu.com/p/2272b6ca0f0c 一个故事讲懂vue父子组件传值 讲故事前先讲代码 父组件向子组件传值 父组件数据传递给子组件可以通过 ...
- Vue组件传值(二)之 非父子组件传值
Vue中非父子组件之间是如何实现通信的? 本章主要讲的是非父子组件传值,父子组件传值请看上一篇文章. 1.创建新的Vue实例引入项目中,通过$emit.$on来实现非父子组件传值: 1 <!DO ...
- Angular 父子组件传值
Angular 父子组件传值 @Input @Output @ViewChild 新建一个头部组件 newsheader 在主组件引用 news 组件,在news组件添加 newsheader 组 ...
- vue 非父子组件传值
/*非父子组件传值 1.新建一个js文件 然后引入vue 实例化vue 最后暴露这个实例 2.在要广播的地方引入刚才定义的实例 3.通过 VueEmit.$emit('名称','数据') 4.在接收收 ...
- 【vue】父组件主动调用子组件 /// 非父子组件传值
一 父组件主动调用子组件: 注意:在父组件使用子组件的标签上注入ref属性,例如: <div id="home"> <v-header ref="he ...
随机推荐
- Solution -「CF1373G」Pawns
小清新线段树题(( 每个位置的边只能向靠右的三个方向走,最后要走到一条基准线上.即对于一个点 \((x, y)\),它最后应该落在 \((k, y + |k - x|)\). 士兵可以一个一个进行移动 ...
- # 8 快速入门 dubbo
8 快速入门 dubbo 所需资料 注册中心 Zookeeper 安装 zookeeper 官方推荐使用 zookeeper 注册中心: 注册中心负责服务地址的注册与查找,相当于目录服务: 服务提供者 ...
- Command 'ifconfig' not found, but can be installed with: sudo apt install net-tools解决方法
VMware下安装的Ubuntu 当使用ifconfig命令查看网卡配置信息的时候出错 尝试了很多方法都解决不了,直到输入了下面的内容: 然后自己就更新了很多东西 之后重新输入ifconfig命令就能 ...
- 在Webpack 5 中如何进行 CSS 常用配置?
本文摘要:主要通过实操讲解运用Webpack 5 CSS常用配置的方法步骤 前文已谈到可以通过配置 css-loader 和 style-loader,使 webpack5 具有处理 CSS 资源的能 ...
- 2499-springboot使用jar形式打包在linux上运行
由于maven使用的种种问题,以前springboot版本变化较快带来的一些不兼容问题,是否考虑下使用jar形式运行web程序,而不是固守于war包与tomcat: 主要原理有两点: 使用nohup来 ...
- css基础04
所有浮动都是贴着浮动的.一左一右的话就毫无联系了. 浮动元素和标准流是两个级别了,浮起来了,后面的人会补上空缺的位置,让其他标准流的盒子占有. 很容易形成叠加效果,(蓝色的标准流会上去补上浮动的位置, ...
- Dubbo源码(七) - 集群
前言 本文基于Dubbo2.6.x版本,中文注释版源码已上传github:xiaoguyu/dubbo 集群(cluster)就是一组计算机,它们作为一个总体向用户提供一组网络资源.这些单个的计算机系 ...
- Luogu3871 [TJOI2010]中位数 (平衡树)
"#define int long long" 导致100pts \(\rightarrow\) 80pts #include <iostream> #include ...
- Luogu3802 小魔女帕琪 (排列组合)
注意除数为0情况 #include <iostream> #include <cstdio> #include <cstring> #include <alg ...
- 搞定面试官 - 可以介绍一下在 MySQL 中你平时是怎么使用 COUNT() 的嘛?
大家好,我是程序员啊粥. 相信在大家的工作中,有很多的功能都需要用到 count(*) 来统计表中的数据行数.同时,对于一些大数据的表,用 count 都是瑟瑟发抖,往往会结合缓存等进行处理. 那么, ...