react 上下文传参的方式

1. 在src文件@/ThemeContext定义上下文对象，用来管理上下文

import React from 'react'
const ThemeContext = React.createContext()
export default ThemeContext

2. 使用上下文传参

import ThemeContext from '@/ThemeContext'
class Vote extends React.Component {
    render () {
        return <div>
        <ThemeContext.Provider value={{
        supNum: 100,
        oppNum: 200
        }}>
            <div>这是根组件</div>
        </ThemeContext.Provider>
        </div>
    }
}

3.接收参数的方式

接收参数的方式（1）

import ThemeContext from '@/ThemeContext'
class VoteMain extends React.Component {
    static contextType = ThemeContext //必须用contextType接收
    render() {
        let {supNum, oppNum } = this.context
        return <div >
            <p>{supNum + oppNum}</p>
         </div>
         }
}

接收参数的方式（2）

import ThemeContext from '@/ThemeContext'
class VoteMain extends React.Component {
    render() {
        return <ThemeContext.Consumer>
            {context => {
                    return <div> 
                        <p>{context.supNum + context.oppNum}</p>
                 </div>
            }}
        </ThemeContext.Consumer>
         }
}

4. 在函数组件中，传参与类组件传参一样，但是在接收参数的方式上有些不同，同样也是两种方式，可以使用类组件【接收参数的方式（2）】的方式和一个hook函数useContext的方式。

import React, {useContext} from 'react'
import ThemeContext from '@/ThemeContext'
const VoteMain = function (){
    let {supNum, oppNum} = useContext(ThemeContext)
    return <div >
            <p>{supNum + oppNum}</p>
         </div>
}