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减少代码 更加简洁