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 ...
随机推荐
- CMU15445 (Fall 2019) 之 Project#4 - Logging & Recovery 详解
前言 这是 Fall 2019 的最后一个实验,要求我们实现预写式日志.系统恢复和存档点功能,这三个功能分别对应三个类 LogManager.LogRecovery 和 CheckpointManag ...
- 常用的函数式接口_Predicate接口_默认方法and和Predicate接口练习_集合接口筛选
默认方法:and 既然是条件判断,就会存在与.或.非三种常见的逻辑关系.其中将两个Preadicate条件使用"与"逻辑连接起来实现"并且"的效果时,可以使用d ...
- Centos7借助docker部署mysql,提供远程链接服务
Centos7 借助docker部署mysql,并提供远程连接服务 安装docker 运行docker 注意安装docker和运行docker的步骤很简单,可以参考我学习docker的笔记 docke ...
- 【人工智能】【Python】Matplotlib基础
Maplotlib 本文档由萌狼蓝天写于2022年7月24日 目录 Maplotlib (一)Matplotlib三层结构 (二)画布创建.图像绘制.图像显示 (三)图像画布设置.图像保存 (四)自定 ...
- jsx/tsx使用cssModule和typescript-plugin-css-modules
目录 1,前言 2,效果图 3,如何使用 3.1,安装 3.2,配置 4,示例 5,插件错误处理 5.1,错误触发原因 5.2,解决办法 1,前言 在vite/webpack搭建的项目中,不管是vue ...
- 第十六天python3 文件IO(二)
BytesIO操作 io模块中的类 from io import BytesIO 内存中,开辟的一个二进制模式的buffer,可以像文件对象一样操作它: 当close方法被调用的时候,这个buffer ...
- 20220722-Java中this关键字
this关键字知识总结 学习资源:B站韩顺平老师Java入门教学 代码示例1 public class This01 { public static void main(String[] args) ...
- SpringCloud微服务实战——搭建企业级开发框架(四十五):【微服务监控告警实现方式二】使用Actuator(Micrometer)+Prometheus+Grafana实现完整的微服务监控
无论是使用SpringBootAdmin还是使用Prometheus+Grafana都离不开SpringBoot提供的核心组件Actuator.提到Actuator,又不得不提Micrometer ...
- 8月份的.NET Conf 活动 专注于 .NET MAUI
.NET Conf:Focus on MAUI 是一个为期一天的免费直播活动,将于太平洋时间 8 月 9 日上午 9 点开始,来自社区和 Microsoft 团队的演讲者们将分享使用MAUI .了解. ...
- 实现一个会动的鸿蒙 LOGO
本文将带大家简单实现一个会动的鸿蒙 LOGO. emmm,写本文的动机是之前在掘金看到一篇实现鸿蒙 LOGO 的文章 -- 产品经理:鸿蒙那个开场动画挺帅的 给咱们页面也整一个呗 鸿蒙的 LOGO 本 ...