新版本react的context使用

栏目: 服务器 · 发布时间: 6年前

内容简介:Context 通过组件树提供了一个传递数据的方法,从而避免了在每一个层级手动的传递 props 属性。在一个典型的 React 应用中,数据是通过 props 属性由上向下(由父及子)的进行传递的,但这对于某些类型的属性而言是极其繁琐的(例如:地区偏好,UI主题),这是应用程序中许多组件都所需要的。 Context 提供了一种在组件之间共享此类值的方式,而不必通过组件树的每个层级显式地传递 props 。参考文档:

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 )

以上所述就是小编给大家介绍的《新版本react的context使用》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

如何把事情做到最好

如何把事情做到最好

乔治·伦纳德 / 张乐 / 中国青年出版社 / 2014-2 / 29.90元

•改变全球9800万人的人生指导书 •全美第一本系统阐述学习与成功之道的经典著作 •长期盘踞全美畅销书榜单 •21年后,这本传奇之书终于在中国震撼上市 •把事情做到最好,第一不强求天赋,第二不介意起步的早晚,你要做的就是“起步走”并“不停地走” 《如何把事情做到最好》出 版于1992年,经久不衰,经过一代又一代的读者口碑相传后,畅销至今。作者以其独特的视角告诉人们,如......一起来看看 《如何把事情做到最好》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

MD5 加密
MD5 加密

MD5 加密工具

SHA 加密
SHA 加密

SHA 加密工具