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. CMU15445 (Fall 2019) 之 Project#4 - Logging & Recovery 详解

    前言 这是 Fall 2019 的最后一个实验,要求我们实现预写式日志.系统恢复和存档点功能,这三个功能分别对应三个类 LogManager.LogRecovery 和 CheckpointManag ...

  2. 常用的函数式接口_Predicate接口_默认方法and和Predicate接口练习_集合接口筛选

    默认方法:and 既然是条件判断,就会存在与.或.非三种常见的逻辑关系.其中将两个Preadicate条件使用"与"逻辑连接起来实现"并且"的效果时,可以使用d ...

  3. Centos7借助docker部署mysql,提供远程链接服务

    Centos7 借助docker部署mysql,并提供远程连接服务 安装docker 运行docker 注意安装docker和运行docker的步骤很简单,可以参考我学习docker的笔记 docke ...

  4. 【人工智能】【Python】Matplotlib基础

    Maplotlib 本文档由萌狼蓝天写于2022年7月24日 目录 Maplotlib (一)Matplotlib三层结构 (二)画布创建.图像绘制.图像显示 (三)图像画布设置.图像保存 (四)自定 ...

  5. jsx/tsx使用cssModule和typescript-plugin-css-modules

    目录 1,前言 2,效果图 3,如何使用 3.1,安装 3.2,配置 4,示例 5,插件错误处理 5.1,错误触发原因 5.2,解决办法 1,前言 在vite/webpack搭建的项目中,不管是vue ...

  6. 第十六天python3 文件IO(二)

    BytesIO操作 io模块中的类 from io import BytesIO 内存中,开辟的一个二进制模式的buffer,可以像文件对象一样操作它: 当close方法被调用的时候,这个buffer ...

  7. 20220722-Java中this关键字

    this关键字知识总结 学习资源:B站韩顺平老师Java入门教学 代码示例1 public class This01 { public static void main(String[] args) ...

  8. SpringCloud微服务实战——搭建企业级开发框架(四十五):【微服务监控告警实现方式二】使用Actuator(Micrometer)+Prometheus+Grafana实现完整的微服务监控

      无论是使用SpringBootAdmin还是使用Prometheus+Grafana都离不开SpringBoot提供的核心组件Actuator.提到Actuator,又不得不提Micrometer ...

  9. 8月份的.NET Conf 活动 专注于 .NET MAUI

    .NET Conf:Focus on MAUI 是一个为期一天的免费直播活动,将于太平洋时间 8 月 9 日上午 9 点开始,来自社区和 Microsoft 团队的演讲者们将分享使用MAUI .了解. ...

  10. 实现一个会动的鸿蒙 LOGO

    本文将带大家简单实现一个会动的鸿蒙 LOGO. emmm,写本文的动机是之前在掘金看到一篇实现鸿蒙 LOGO 的文章 -- 产品经理:鸿蒙那个开场动画挺帅的 给咱们页面也整一个呗 鸿蒙的 LOGO 本 ...