共计 966 个字符,预计需要花费 3 分钟才能阅读完成。
Context 通过组件树提供了一个传递数据的方法,从而避免了在每一个层级手动的传递 props 属性。
在一个典型的 React 应用中,数据是通过 props 属性由上向下(由父及子)的进行传递的,但这对于某些类型的属性而言是极其繁琐的(例如:地区偏好,UI 主题),这是应用程序中许多组件都所需要的。Context 提供了一种在组件之间共享此类值的方式,而不必通过组件树的每个层级显式地传递 props。
参考文档:https://react.docschina.org/d…
connect.js
import React from 'react'
const ctx = React.createContext()
export const {Provider, Consumer} = ctx
export const withComponent = Component => props => <Consumer>{propsObj => <Component { ...props} propsObj={propsObj}></Component> }</Consumer>
export default ctx
index.js
在最外层组件引入 Provider(* 注意 Provider 的 value 名字不能改变)
import React, {Component} from 'react
import {Provider} from './connect.js
import Carder from './carder.js'
export default class Index extends Component {
state = {test: false}
render() {
return (<Provider value={this.state.test}>
<Carder>
</Provider>
)
}
}
carder.js
import React, {Component} from 'react
import {withComponent} from './connect.js
class Carder extends Component {
state = {test: false}
render() {
return (
<div>
<p>test 的值为:{this.props.test}</p>
</div>
)
}
}
export default withComponent(Carder)
正文完