Context 传值

context的优点是 我们假如有一个父组件和2个组件a,b 从父组件传值给b
a中嵌套的b不能直接传得父组件=》b组件=》a组件

当我们使用context的时候就可以直接从父元素传给子组件a

有两种写法 一种是class 还有一种是函数组件

首先我们先用class写
在父组件中写
import React, { Component } from ‘react’
import B from ‘./b’
import Context from ‘./c’
export class Move extends Component {
state = {
data:{
name: ‘小花’
}
}
Onclick = opt => {
console.log(opt,23);
}
render() {
const obj = {…this.state.data, one : this.Onclick }
return (

<Context.Provider value={obj}>

</Context.Provider>

)
}
}

export default Move

在子组件中是

import React, { Component } from ‘react’
import Theme from ‘./c’

export class A extends Component {
// static contextType = Theme
render() {
// const { name , one } = this.context
return (

{/* <h1 onClick={() => one(‘wsw’)}>{name}
123 */}
<Theme.Consumer>
{
({name , one}) => {
return (
<h1 onClick={() => one(‘wsw’)}>{name}
)
}
}
</Theme.Consumer>

)
}
}

export default A

但是我们需要一个公共的组件c来承接他们的值

import React from ‘react’
export default React.createContext(‘light’)

默认是一个值 要是父元素不传的话 就显示出这个默认值

接下来是函数组件的写法 主页面照常写 组件c 照常写 唯一改变的是a组件

import React from ‘react’
import Theme from ‘./c’

export function A() {
const { name, one } = React.useContext(Theme)
return (

123456
<h1 onClick={() => one(‘wsw’)}>{name}

)
}

export default A
利用hook中的useContext减少代码 更加简洁