手机版
你好,游客 登录 注册
背景:
阅读新闻

react新更新的context传递数据

[日期:2019-05-21] 来源:Linux社区  作者:frontEndJie [字体: ]

看到网上都是老版的context,发一篇最新的context的使用及小例子。

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

引入

const {Provider, Consumer} = React.createContext(defaultValue);
  1. 创建一对 { Provider, Consumer }。当 React 渲染 context 组件 Consumer 时,它将从组件树的上层中最接近的匹配的 Provider 读取当前的 context 值。如果上层的组件树没有一个匹配的 Provider,而此时你需要渲染一个 Consumer 组件,那么你可以用到 defaultValue 。这有助于在不封装它们的情况下对组件进行测试。
  2. defaultValue可以书写默认传递的值

Provider

<Provider value={/* some value */}>

接收一个 value 属性传递给 Provider 的后代 Consumers。一个 Provider 可以联系到多个 Consumers。Providers 可以被嵌套以覆盖组件树内更深层次的值。

Consumer

<Consumer>
  {value => /* render something based on the context value */}
</Consumer>

接收一个 函数作为子节点. 函数接收当前 context 的值并返回一个 React 节点。传递给函数的 value 将等于组件树中上层 context 的最近的 Provider 的 value 属性。如果 context 没有 Provider ,那么 value 参数将等于被传递给 createContext() 的 defaultValue 。

代码小例:

import React,{Component} from 'react'
const {Provider, Consumer} = React.createContext()
class Father extends Component{
    constructor (props){
        super(props)
        this.state={
            money:25
        }
    }
    render(){
        return (
            <Provider value={this.state}>
                <div>
                <h2>爸爸的钱:{this.state.money}</h2>
                <A></A>
            </div>
            </Provider>  
        )
    }
}
class A extends Component{
    render(){
        return (
            <Consumer>
                {value=><Son  value={value} ></Son>}
            </Consumer>
        )
    }
}
class Son extends Component{
    render(){
        console.log(this.props.value.money)
        return(
            <div>
                {this.props.value.money}
            </div>
        )
    }
}
export default Father

Linux公社的RSS地址https://www.linuxidc.com/rssFeed.aspx

本文永久更新链接地址https://www.linuxidc.com/Linux/2019-05/158791.htm

linux
本文评论   查看全部评论 (0)
表情: 表情 姓名: 字数

       

评论声明
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款