新版本react的context使用

36次阅读

共计 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)

正文完
 0