react中context、useContext的简单使用

有三个组件，A嵌套B，B嵌套C

本文中并没有写Consunmer标签的使用方式，使用下面这几种就挺好用的，还能少写一个标签；个人更推荐使用hooks的方式

一定要记得导出自己创建的context

---

1、使用类式组件

---

ContextA代码

import React, {createContext, Components} from 'react'
import ContextB from './ContextB'

export const myContext = createContext()
const { Provider } = myContext
export default class ContextA extends Components {
	state = {name:'tom'}
    render() {
		return (
	        <div>
	            <h2>我是A组件</h2>
	            <h4>我得名字是：{name}</h4>
	            <Provider value={{name: 'tom'}}>
	                <ContextB />
	            </Provider>
	        </div>
	    )	
	}
}

ContextC代码

import React, {Components} from 'react'
import {myContext} from './ContextA'
export default class ContextC extends Components {
	static context = myContext
	console.log(context)
    render() {
		return (
	        <div>
	            <div>
		            <h2>我是C组件</h2>
		            cccccc===================》我从A组件接到的用户名是：{context.name}
		            <hr />
		        </div>
	        </div>
	    )	
	}
}

---

2、使用函数式组件，使用useContext

---

ContextA代码

import React, {useState, createContext} from 'react'
import ContextB from './ContextB'

export const myContext = createContext()
const { Provider } = myContext
export default function ContextA() {
    const [name, setName] = useState('tom')
    
    return (
        <div>
            <h2>我是A组件</h2>
            <h4>我得名字是：{name}</h4>
            <Provider value={{name: 'tom'}}>
                <ContextB name={name} />
            </Provider>
            
        </div>
    )
}

ContextC代码

import React, {useContext} from 'react'
import {myContext} from './ContextA'

export default function ContextC() {
    const context = useContext(myContext)
    console.log(context)
    return (
        <div>
            <h2>我是C组件</h2>
            cccccc===================》我从A组件接到的用户名是：{context.name}
            <hr />
        </div>
    )
}