Context 跨组件传值方法_我是顾昀峰的博客

link之家
链接快照平台
输入网页链接，自动生成快照
标签化管理网页链接
父组件 ContextPage.js

import React, { Component } from 'react'
// 引入子组件ContextTypePage
import ContextTypePage from './ContextTypePage'
// 第一步创建一个Context对象
// const ThemeContext = React.createContext ()
export default class ContextPage extends Component {
 constructor(props){
   super(props)
   this.state={
     theme: {
       themeColor: 'red'
  render() {
    // 通过props传递
    // 把constructor的属性 theme 拿出来
    const { theme } = this.state
    return (
        <h3>ContextPage</h3>
        <ContextTypePage {...theme} />
子组件ContextTypePage.js
 
import React, { Component } from 'react'
export default class ContextTypePage extends Component {
  render() {
    // 通过props父组件传递给子组件
    const { themeColor } = this.props
    return (
         <h3 className= { themeColor } >ContextTypePage</h3>
react Context方法
 
contextType只能使用在class组件中，而且只能赋值一次 
公共方法Context.js 作用定义一个Context对象
 
import React from 'react'
// 定义一个公共context 方法
export const ThemeContext = React.createContext ()
app.js
 
import React from 'react';
// import logo from './logo.svg';
import './App.css';
import ContextPage from './pages/ContextPage'
function App() {
  return (
    <div className="App">
      <ContextPage />
export default App;
contextPage.js
 
import React, { Component } from 'react'
// 引入子组件ContextTypePage
import ContextTypePage from './ContextTypePage'
// 引入公共的Context.js
import { ThemeContext } from '../Context'
// // 第一步创建一个Context对象
// const ThemeContext = React.createContext ()
export default class ContextPage extends Component {
 constructor(props){
   super(props)
   this.state={
     theme: {
       themeColor: 'red'
  render() {
    // // 通过props传递
    // 把constructor的属性 theme 拿出来
    const { theme } = this.state
    return (
        <h3>ContextPage</h3>
        {/* 第二步使用provider传递给子组件,同时通过value把值传递给子组件 */}
        <ThemeContext.Provider value= { theme }>
         <ContextTypePage  />
        </ThemeContext.Provider>
ContextTypePage.js
 
import React, { Component } from 'react'
import {ThemeContext} from '../Context'
export default class ContextTypePage extends Component {
  static contextType = ThemeContext
  render() {
    // 定义Context
    const { themeColor } =  this.context;
    // 通过props父组件传递给子组件
    console.log("this", this)
    // 通过static拿到themeContext
    return (
         <h3 className={themeColor}>ContextTypePage</h3>
在render函数中打印this会出现下图结果
  
使用hook方式的useContext 实现function 组件传递Context
 
contextTypePage.js
 
useContext只能使用在function组件内，本身是一个hooks方法，可以同时导入多个赋值 
import React, { Component, useContext } from 'react'
import {ThemeContext, UserContext} from '../Context'
export default class ContextTypePage extends Component {
  static contextType = ThemeContext
  render() {
    // 定义Context
    const { themeColor } =  this.context;
    // 通过props父组件传递给子组件
    console.log("this", this)
    // 通过static拿到themeContext
    return (
         <h3 className={themeColor}>ContextTypePage</h3>
         <Child />
// 在创建function 的子组件 不能使用class组件里面的static方法
// 可以使用hook useContext来是实现传值
function Child () {
  // 通过useContext 获取themeContext
  const themeContext = useContext(ThemeContext)
  // 同时使用多个useContext
  const userContext = useContext(UserContext)
  console.log(userContext)
  const { themeColor } = themeContext
return <div className= {themeColor}>Child组件{userContext.name}</div>
context.Consumer
 
Context.consumer只能使用在class组件中 解决contextType一次只能赋值一次的问题 
app.js
 
import React from 'react';
// import logo from './logo.svg';
import './App.css';
import ContextPage from './pages/ContextPage'
import ConsumerPage from './pages/ConsumerPage'
function App() {
  return (
    <div className="App">
      <ContextPage />
      <ConsumerPage />
export default App;
ConsumerPage.js
 
// 使用consumer方法在class中使用多个赋值
import React, { Component } from 'react'
import {ThemeContext, UserContext} from '../Context'
export default class ConsumerPage extends Component {
  render() {
    return (
        <h3>ConsumerPage</h3>
        {/* Consumer 内部需要用函数来解构 */}
        <ThemeContext.Consumer>
          { themeCtx=>
            <div className={themeCtx.themeColor}>
                // 嵌套写UserContext.Consumer
                <UserContext.Consumer>
                    user =><div>{user.user}</div>
                </UserContext.Consumer>
        </ThemeContext.Consumer>
1. 对象不能引入到Provider value 里面，源于react 内部比较context的是===全等但是两个相同对象是不相同 ，因此每一次都会渲染，因此把对象放入state中

                                    1.组件和组件之间的关系 （1）父子 props （2）子父 回调函数 context （3）嵌套 props context （4）并列 redux mobx（公共数据管理仓库） 全局变量 （暂时不讲）2.在根组件（需要提供数据或方法的组件）套上一个Provider, 把值赋给属性value 在接收数据或函数方法的组件上套上一个Consumer。子向父传值 是父组件向子组件传一个函数名字 子组件去调用，在调用函数时通过参数传给父组件。4.嵌套传值 嵌套组件传值和父子传值都可用 context。
                                    创建一个Context对象，当React渲染一个订阅了这个Context对象的组件，这个组件会从组件树中离自身最近的那个匹配的Provider中读取到当前的context值。只有当组件所处的树中没有匹配到Provider时，其才会生效。
提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法
import styles from './index.less';
import React, { Component, createContext } from 'react'
const BatteryContext = createContext(0);
//创建createContext实例对象，必须传一个默认值,默认值的意义就是Consumer向上找不到对于的Provider就会展示该默认值
export default React.createContext(‘默认参数’)
2、在父组件引入这个子组件
import React, { useState } from ‘react’
import B from ‘./b’
import ThemeContext from ‘./c’
<ThemeContext.Provider&
1、实例一个class 继承Mapper<输入的key的数据类型，输入的value的数据类型，输出的key的数据类型，输出的value的数据类型
2、重写map方法 map(LongWritable key, T...
                                    react Context/Provider/Consumer传参使用
react context这个api很少用到,所以一直不太清楚如何使用,最近在看antd的项目源码时,发现在组件中有类似Template.Comsumer的写法,一时没反应过来,本着碰到不懂得都要追根究底的原则,下面好好学习一下,Context这个api的使用
Context
上下文(Context) 提供了一种通过...
Context可以做很多事情，打开activity、发送广播、打开本包下文件夹和数据库、获取classLoader、获取资源等等。
通常情况下获取当前应用的context的方法是getApplicationContext，
但是通过根据其他的packageName如何构造 Context呢? 
CreatePackageContext这个方法有