react中使用decorator 封装context
在传统的react context中,子组件使用context十分繁琐,如果需要使用context的子组件多的话
每个组件都需要写consumer,所有如果能使用decorator的话,就会方便很多
import React from 'react';
import MyContext from '../context.js'; class Son extends React.Component {
render() {
return (
// 每一个需要使用context的组件 你都需要用consumer包装一下
// 如果有一百个呢???? 而且写法复杂很不友好!
<MyContext.Consumer>
{value => (
<div>
<div>{value.name}</div>
<div>{value.age}</div>
</div>
)}
</MyContext.Consumer>
)
}
} export default Son;
import React from 'react';
import MyContext from '../context.js'; function withUser(Component) { // 定义一个方法,这个方法就是decorator装饰器
return class extends React.Component{ // 方法返回了一个组件 是将原组件装饰之后的组件
render() {
return (
// 装饰器统一将原组件用Consumer包装起来 并将context的value值存在组件props的指定key中,这里是user
<MyContext.Consumer>
{value => <Component user={value} {...this.props} />}
</MyContext.Consumer>
)
}
}
} export default withUser;
import React from 'react';
import withUser from './decorator'; @withUser // 装饰器的参数默认就是下面的组件了
class Son extends React.Component {
render() {
return (
<div>
{/* 经过 装饰器装饰过的组件中 props中已经有了context的值了, key是user */}
<div>{this.props.user.name}</div>
<div>{this.props.user.age}</div>
</div>
)
}
} export default Son;
react中使用decorator 封装context的更多相关文章
- 如何在react中使用decorator
2020-03-27 如何在react中使用decorator decorator目前都需要修改babel才能使用 说一下具体的操作方法 踩了一天的坑... 步骤1: yarn create reac ...
- react中对于context的理解
一.context旧版的基本使用 1.context的理解 当不想在组件树中通过逐层传递props或state的方式来传递数据时,可使用context来实现跨层级的组件数据传递. 2.context的 ...
- React中的Context——从父组件传递数据
简介:在React中,数据可以以流的形式自上而下的传递,每当你使用一个组件的时候,你可以看到组件的props属性会自上而下的传递.但是,在某些情况下,我们不想通过父组件的props属性一级一级的往下传 ...
- react中的refs
概述 很久之前就知道refs,感觉好神秘,恰好今天突然发现字符串形式的ref在官网不推荐使用了,于是好好总结一下ref的用法,供以后开发时参考,相信对其他人也有用. 参考资料: Refs & ...
- [Web 前端] mobx教程(三)-在React中使用Mobx
copy from : https://blog.csdn.net/smk108/article/details/85053903 Mobx提供了一个mobx-react包帮助开发者方便地在React ...
- React中如何优雅的捕捉事件错误
React中如何优雅的捕捉事件错误 前话 人无完人,所以代码总会出错,出错并不可怕,关键是怎么处理. 我就想问问大家react的错误怎么捕捉呢? 这个时候: 小白:怎么处理? 小白+: ErrorBo ...
- 解读vue-server-renderer源码并在react中的实现
前言 在博客开发的过程中,有这样一个需求想解决,就是在SSR开发环境中,服务端的代码是是直接通过webpack打包成文件(因为里面包含同构的代码,就是服务端与客户端共享前端的组件代码),写到磁盘里 ...
- React中使用CSSTransitionGroup插件实现轮播图
动画效果,是一个页面上必不可少的功能,学习一个新的东西,当然就要学习,如何用新的东西,用它的方法去实现以前的东西啦.今天呢,我就在这里介绍一个试用react-addons-css-transition ...
- 在React中使用Redux
这是Webpack+React系列配置过程记录的第六篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...
随机推荐
- uwsgi模块以参数形式运行项目
1.虚拟环境中下载uwsgi模块-------pip install uwsgi 2.脚本运行案例 新建一个test.py脚本文件,写入如下内容: def application(env, start ...
- JavaScript事件坐标区别(offset,client,page)
学习笔记. 1. offset:其定位原点是当前元素左上角 2. client:其定位原点是当前窗口左上角 3. page:其定位原点是当前页面左上角 下面来验证一下. 先上代码: <!doct ...
- 201771010128 王玉兰《面象对象程序设计 (Java) 》第六周学习总结
---恢复内容开始--- 第一部分:基础知识总结: 1.继承 A:用已有类来构建新类的一种机制,当定义了一个新类继承一个类时,这个新类就继承了这个类的方法和域以适应新的情况: B:特点:具有层次结构. ...
- 【Redis】String应用场景
单值缓存 SET key value GET key 对象缓存 SET user: value(json格式数据) MSET user::name value1 user::balance value ...
- JS轮播图带序号小点和左右按钮
轮播图作为前端比较简易的动画,使用非常频繁,这里记录以便使用 此轮播图为最简易自动播放,非无缝,但有按钮,有序号跳转小点 想看全套轮播图可以查看我的分类轮播图全套 html布局 <div sty ...
- CSS3新子代选择器
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型,除了<h>标签. n 可以是数字.关键词或公式 例子一 <!DOCTYPE html> & ...
- 解决python引包错误
# coding=utf8# date = 2019/12/23 19:54# 清白丶之年__照林""" # Solve Import Lib Error Add Som ...
- [PHP自动化-进阶]003.CURL处理Https请求访问
引言:继前文<模拟登录并采集数据>,<模拟登录带有验证码的网站>,大家对CURL基本上已经有了认识,这一讲简单的说一下请求Https. 在很多的站点,如TalkingData, ...
- 获取元素节点的子节点 & 获取文本节点
1. 获取元素节点的子节点(**只有元素节点才有子节点): ①. childNodes 属性获取全部的子节点, 但该方法不实用. 因为如果要获取指定的节点 ...
- Xilinx ISE多功能移位寄存器仿真及Basys2实验板实验
移位寄存器实现Verilog代码: `timescale 1ns / 1ps module add( input clk, input reset, input [1:0] s, input dl, ...