context的使用

概念

一种组件间通信方式，常用于【祖组件】与【后代组件】间通信
应用开发过程中，一般不会使用context，一般都用它封装react插件

//1 创建Context容器对象：
cosnt XxxContext = React.createContext();
// 2 渲染子组件时，外面包裹XxxContext.provider，通过value属性给后代组件传递数据：
<xxxComponent.Provider value={数据}>子组件
</xxxComponent.Provider>
// 3 后代组件读取数据
// 写法一
// 特点：简便、主要用在类组件
static contextType = xxxContext  //声明接收context
this.context //读取context中的value数据
// 写法二
// 特点：不需要this、可以接收多个context、主要用在函数组件
<xxxContext.Consumer>{value=>( //value就是context中的value数据要显示的内容)}
</xxxContext.Consumer>

实际应用


import React, { Component } from 'react';// 创建Context对象
const MyContext = React.createContext()
const { Provider, Consumer } = MyContext;class A extends Component {state = {name: 'tom',age:15}render() {const {name,age}= this.statereturn (<div><h2>组件A</h2><Provider value={{name,age}}><B/></Provider><hr /></div>);}
}class B extends Component {render() {//  console.log(this)return (<div><hr /><h2>组件B</h2><C/></div>);}
}// class C extends Component {// // 声明接收
// static contextType = MyContext
//   render() {//     const { name, age } = this.context;
//     return (
//       <div>
//          <hr />
//         <h2>组件C</h2>
//         <p>{name}-------{age}</p>//       </div>
//     );
//   }
// }function C (){return (<div><hr /><h2>组件C</h2><p><Consumer>{(value)=>(`${value.name}--------${value.age}`)}</Consumer></p></div>)}export default A;

context的使用相关推荐

Go 学习笔记（68）— goroutine 并发控制神器 Context
1. 什么是 Context 一个任务会有很多个 goroutine 协作完成,一次 HTTP 请求也会触发很多个 goroutine 的启动,而这些 goroutine 有可能会启动更多的子 gor ...
Docker Context基本原理
Docker Context基本原理介绍本指南介绍了上下文如何使单个Docker CLI轻松管理多个Swarm集群.多个Kubernetes集群和多个单独的Docker节点. 单个Docker C ...
Android中Context 的理解
这里记录Context的原因是新来的同事问我Android Context 怎样理解,我是这样说的,Context 英文是上下文,它是一个抽象的类,加入在MainActivity 中,Context ...
Context.getExternalFilesDir()和Context.getExternalCacheDir()
在Android手机里面,缓存的位置分为两类一个是内部存储另一个是外部存储 Context.getExternalFilesDir()和Context.getExternalCacheDir() ...
android上下文关系,Android Context上下文的理解 Hua
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? Context概念在安卓对象中,Context是经常使用的元素-但应该也是错误使用率最高的. 你在加载资源.启动一个新 ...
用Macbook-苹果系统写代码出现显示问题Text input context does not respond to _valueForTIProperty:
Macbook / 苹果系统写代码出现显示问题当使用Mac系统,在写代码的时候,如果是有一个GUI显示界面,然后你又去点击这个界面.此时,将报错. 我的源代码,是读取图片,显示图片. import ...
FAIL - Deployed application at context path / but context failed to start
IDE报错:FAIL - Deployed application at context path / but context failed to start 编译通过,这个错误原因是很多地方被误用, ...
findclass java_Java Context.findClass方法代码示例
import jdk.nashorn.internal.runtime.Context; //导入方法依赖的package包/类 private static Class> simpleType ...
context.xml mysql_在tomcat下context.xml中配置各种数据库连接池(示例代码)
Tomcat6的服务器配置文件放在 ${tomcat6}/conf 目录底下.我们可以在这里找到 server.xml 和 context.xml.当然,还有其他一些资源文件.但是在在本文中我们只用得 ...
java.lang.NoSuchMethodError: org.springframework.web.context.support.XmlWebApplicationContext.getEnv
转自:https://blog.csdn.net/u012941811/article/details/16960493 ava.lang.NoSuchMethodError: org.springf ...

context的使用

概念

实际应用

context的使用相关推荐

最新文章

热门文章