一、全局定义context对象

  globalContext.js

import React from "react";
const GlobalContext = React.createContext();
export default GlobalContext;

二、根组件引入GlobalContext,并使用GlobalContext.Provider(生产者)

import React, { Component ,Fragment} from 'react';
import One from "./components/one";
import GlobalContext from "./globalContext"; class App extends Component {
render() {
return (
<GlobalContext.Provider
value={{
name:"zhangsan",
age:
}}
>
<One/>
</GlobalContext.Provider>
);
}
} export default App;

 三、组件引入GlobalContext并调用context,使用GlobalContext.Consumer

  

import React, { Component } from 'react'
import GlobalContext from "../globalContext";
export default class One extends Component { render() {
return (
<GlobalContext.Consumer>
{
context => {
console.log(context)
return (
<div>
<h2>{context.name}</h2>
<h2>{context.age}</h2>
</div>
)
}
}
</GlobalContext.Consumer>
)
}
}

【react】---context的基本使用新版---【巷子】的更多相关文章

  1. 探索 Redux4.0 版本迭代 论基础谈展望(对比 React context)

    Redux 在几天前(2018.04.18)发布了新版本,6 commits 被合入 master.从诞生起,到如今 4.0 版本,Redux 保持了使用层面的平滑过渡.同时前不久, React 也从 ...

  2. React context基本用法

    React的context就是一个全局变量,可以从根组件跨级别在React的组件中传递.React context的API有两个版本,React16.x之前的是老版本的context,之后的是新版本的 ...

  3. [React] Prevent Unnecessary Rerenders of Compound Components using React Context

    Due to the way that React Context Providers work, our current implementation re-renders all our comp ...

  4. React Context API

    使用React 开发程序的时候,组件中的数据共享是通过数据提升,变成父组件中的属性,然后再把属性向下传递给子组件来实现的.但当程序越来越复杂,需要共享的数据也越来越多,最后可能就把共享数据直接提升到最 ...

  5. React Hooks +React Context vs Redux

    React Hooks +React Context vs Redux https://blog.logrocket.com/use-hooks-and-context-not-react-and-r ...

  6. 【react】---context的基本使用---【巷子】

    一.context的理解 很多优秀的React组件都通过Context来完成自己的功能,比如react-redux的<Provider />,就是通过Context提供一个全局态的stor ...

  7. [译]迁移到新的 React Context Api

    随着 React 16.3.0 的发布,context api 也有了很大的更新.我已经从旧版的 api 更新到了新版.这里就分享一下我(作者)的心得体会. 回顾 下面是一个展示如何使用旧版 api ...

  8. 对 React Context 的理解以及应用

    在React的官方文档中,Context被归类为高级部分(Advanced),属于React的高级API,但官方并不建议在稳定版的App中使用Context. 很多优秀的React组件都通过Conte ...

  9. React Context上下文

    目录 前言 一 context旧版使用步骤 1.1 根组件childContextTypes属性 1.2 根组件getChildContext方法 1.3 子组件contextTypes静态属性 1. ...

随机推荐

  1. vue中Axios请求豆瓣API数据并展示到Swipe中

    vue中Axios请求豆瓣API数据并展示到Swipe中 1.首先是安装Axios: 安装方法cnpm install axios --save 等待npm安装完毕: 2.在main.js中引入axi ...

  2. oracle完全删除实例

    问题描述: 重建oracle库实例,因此要删除数据库实例 问题解决: 利用自用自带的dbca库管理,实现图形化删除实例  01.登录安装oracle数据库的linux 打开xshell企业版的Xman ...

  3. Android——SQLite/数据库 相关知识总结贴

    android SQLite简介 http://www.apkbus.com/android-1780-1-1.html Android SQLite基础 http://www.apkbus.com/ ...

  4. JAVA中通过时间格式来生成唯一的文件名

    有时候我们需要截图,在要截图时,有人用到了时间格式,但是时间格式中的:在文件名称中是不被允许的字符,所以就会报错,如何生成唯一的时间文件名: package com.demo; import java ...

  5. CentOS下网卡启动、配置等ifcfg-eth0教程(转)

    步骤1.配置/etc/sysconfig/network-scripts/ifcfg-eth0 里的文件.it动力的CentOS下的ifcfg-eth0的配置详情: [root@localhost ~ ...

  6. 【转载】js关闭当前页面(窗口)的几种方式总结

    1. 不带任何提示关闭窗口的js代码 复制代码代码如下: <a href="javascript:window.opener=null;window.open('','_self'); ...

  7. java中的synchronized同步代码块和同步方法的区别

    下面这两段代码有什么区别? //下列两个方法有什么区别 public synchronized void method1(){} public void method2(){ synchronized ...

  8. Django Mysql SET SESSION TRANSACTION ISOLATION LEVEL READ COMMITTED

    Django 执行makemigrations  的时候报错: django.db.utils.ProgrammingError: (1064, "You have an error in ...

  9. spring boot user authorities类图

  10. python和shell变量互相传递

    python -> shell: 1.环境变量 复制代码 代码如下: import os  var=123或var='123'os.environ['var']=str(var)  #envir ...