Context
Context 提供了一个无需为每层组件手动添加 props,就能在组件树间进行数据传递的方法。
props单向数据流动:
如果觉得Props传递数据很繁琐,可以采用context,进行跨组件传递数据
moneyContext:
import {createContext} from 'react';
let moneyContext = createContext()
let {
Provider,
Consumer
} = moneyContext
export default {
Provider,
Consumer
}
App.js
import React,{Component} from 'react';
import ContextParent from "./ContextParent"
import moneyContext from "./moneyContext"
class App extends Component{
state = {
money:100
}
render(){
return (
<moneyContext.Provider value={{ //提供者的value属性可以给所有的后代元素提供数据
money:this.state.money
}}>
<ContextParent />
</moneyContext.Provider>
)
}
}
export default App;
ContextParent
import React, { Component,createContext } from 'react'
import GrandChild from "./GrandChild"
import moneyContext from "./moneyContext"
export default class ContextParent extends Component {
render() {
return (
//通过公共实例的Context的Consumer,内部子元素写成一个函数,参数就可以获取value值了
<moneyContext.Consumer>
{
(value)=>{
return (
<div>
ContextParent组件获取App传递来的money === {value.money}
<GrandChild />
</div>
)
}
}
</moneyContext.Consumer>
)
}
}
GrandChlid
import React, { Component } from 'react'
import moneyContext from "./moneyContext"
export default class GrandChild extends Component {
render() {
return (
<moneyContext.Consumer>
{
value=>{
return (
<div>
我是GrandChild组件---{value.money}
</div>
)
}
}
</moneyContext.Consumer>
)
}
}