React-Context传值

 接收值的方法

1. 使用函数

<ThemeContext.Consumer>
    {value => (
        <span>{value}</span>
    )}
</ThemeContext.Consumer>

2. 类组件中

 static contextType = ThemeContext;

<p>来自A组件的数据：{this.context}</p>

3.函数组件中

const value = useContext(MyContext);

ThemeContext.js文件

import { createContext } from "react";

const ThemeContext = createContext();

ThemeContext.displayName = "themeContext";
ThemeContext.msg = {
  one: '好耶111',
  two: '好耶222',
}

export default ThemeContext;

祖文件

import React, { Component, createContext } from 'react'

import ContextChild1 from './ContextChild1';
// import ContextChild2 from './ContextChild2';
import ThemeContext from './ThemeContext';

export default class Context extends Component {
  render() {
    return (
      <ThemeContext.Provider value="dark">
        <h1>Context</h1>
        <ContextChild1 />
        {/* <ContextChild2 />/ */}

      </ThemeContext.Provider>
    )
  }
}

ContextChild1 

import React, { Component } from 'react'
import ThemeContext from "./ThemeContext";
import ContextChild2 from './ContextChild2';

export default class ContextChild1 extends Component {
  static contextType = ThemeContext
  componentDidMount() {
    console.log(this.context)
  }
  render() {
    return (
      <div>ContextChild1
        <ThemeContext.Consumer>
          {value => (
            <span>{value}</span>
          )}
        </ThemeContext.Consumer>
        <hr />
        <p>来自A组件的数据：{this.context}</p>
        <ContextChild2></ContextChild2>
      </div>
    )
  }
}