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 ...
随机推荐
- 如何验收安卓PCBA主板的质量和性能
. 版本:v0.1 作者:河东西望 日期:2022-7-15 . 目录 1 有哪些情况需要验收? 2 有哪些验收测试? 2.1 主板测试 2.2 工程测试 2.3 性能测试 2.4 压力测试 2.5 ...
- Scala(二)IO流 读取文件和保存文件
package com.shujia.scala import java.io.{BufferedReader, FileReader, FileWriter} import scala.io.{Bu ...
- 【一本通提高组合数学】 计算系数(NOIP2011提高组)
题面 思路 根据二项式定理, 那么 算 需要用快速幂. 可以根据组合式的递推公式算组合数.我是这么写的. 或者是利用组合数的定义式,但是因为有取余, 所以要用逆元. 其中 为逆元, 这个可以直接用 ...
- Junit使用步骤和junit_@Before&@After
测试: 1.定义一个测试类(测试用例) 建议: 测试类名:被测试的类型Test CalculatorTest 包名:xxx.xxx.xx.test com.li.Test 2.定义测试方法:可以独立运 ...
- mysql 经典案例
MySQL多表联合查询是MySQL数据库的一种查询方式,下面就为您介绍MySQL多表联合查询的语法,供您参考学习之用. MySQL多表联合查询语法: SELECT * FROM 插入表 LEFT JO ...
- 【原创】Selenium获取请求头、响应头
本文仅供学习交流使用,如侵立删! Selenium获取请求头.响应头 操作环境 win10 . mac Python3.9 selenium.seleniumwire selenium是没有办法直接获 ...
- Linux Shell 自动交互功能
需求背景: 近日,在安装某软件过程,发现在安装过程需要输入一些信息才能继续下一步操作,在机器数量较少情况下,我们可以单台登录上去完成安装操作,但当机器数量超过一定时,如果再手动登录操作,就会产生大 ...
- MultiJittered采样类定义和测试
多重抖动在书上说的是水平和竖直方面随机交换. 类声明: #pragma once #ifndef __MULTIJITTERED_HEADER__ #define __MULTIJITTERED_HE ...
- jQuery基础入门(一)
jQuery是什么? jQuery是一个JavaScript常用的工具函数库.jQuery是一个轻量级的"写的少,做的多"的JavaScript库. jQuery当中包含有以下一些 ...
- [Android开发学iOS系列] 工具篇: Xcode使用和快捷键
[Android开发学iOS系列] 工具篇: Xcode使用和快捷键 工欲善其事必先利其器. 编辑 Cmd + N: 新建文件 Option + Cmd + N: 新建文件夹 Cmd + / : 注释 ...