recompose mapProps
mapProps介绍
mapProps
函数接收一个函数参数,这个函数参数会返回一个对象用作为接下来的组件的props
。组件接收到的props
只能是通过mapProps
函数参数返回的对象,其他的props
将会被忽略
mapProps 实例
const Item = ['a', 'b', 'c', 'd'];
const ListMap = mapProps(({ list }) => {
return {
list: list.map((e) => e + '_extends')
};
})(List);
现在可以调用ListMap
组件,并且可以给它传递一个list
属性<ListMap list={Item} />
,在List
组件中获取到的list
数组值每个后缀都会被加上_extends
字符。并且如果你还有其他额外的props
传入会被过滤掉比如<ListMap list={Item} title="hello"/>
,在List组件中并不会接收到title
属性。
在线DEMO
在codepen在线预览
备注
我至少每周会更新4个左右的api使用指南,欢迎关注
recompose mapProps的更多相关文章
- [Recompose] Transform Props using Recompose --mapProps
Learn how to use the 'mapProps' higher-order component to modify an existing component’s API (its pr ...
- [Recompose] When nesting affects Style
In CSS we use the descendant selector to style elements based on their nesting. Thankfully in React ...
- [React] Recompose: Theme React Components Live with Context
SASS Bootstrap allows us to configure theme or branding variables that affect all components (e.g. P ...
- [React] Recompose: Override Styles & Elements Types in React
When we move from CSS to defining styles inside components we lose the ability to override styles wi ...
- react recompose
避免写嵌套 import { compose } from "recompose"; function Message(props) { const { classes } = p ...
- [Recompose] Compose Streams of React Props with Recompose’s compose and RxJS
Functions created with mapPropsStream canned be composed together to build up powerful streams. Brin ...
- [Recompose] Create Stream Behaviors to Push Props in React Components with mapPropsStream
Rather than using Components to push streams into other Components, mapPropsStream allows you to cre ...
- [Recompose] Stream Props to React Children with RxJS
You can decouple the parent stream Component from the mapped React Component by using props.children ...
- [Recompose] Handle React Events as Streams with RxJS and Recompose
Events are the beginning of most every stream. Recompose provides a createEventHandler function to h ...
随机推荐
- (2)Deep Learning之线性单元和梯度下降
往期回顾 在上一篇文章中,我们已经学会了编写一个简单的感知器,并用它来实现一个线性分类器.你应该还记得用来训练感知器的『感知器规则』.然而,我们并没有关心这个规则是怎么得到的.本文通过介绍另外一种『感 ...
- 推荐一款有趣的APP-种子习惯
在女朋友的影响下接触到了种子习惯的app,一开始不觉得它有多大魅力,只知道它有契约的功能,有很多人分享自己的习惯,记录生活中的点滴. 毕业回家的寒假,家里比较冷,每天起床都需要莫大的勇气,挣扎半天最终 ...
- Bounding-box 回归
R-CNN系列均训练了Bounding-box回归器来对窗口进行校正,其目标是学习一种转换关系将预测得到的窗口P映射为真实窗口G(Ground truth). 变换方式 可以通过简单的仿射变换以及指数 ...
- wpf研究之道-grid控件
想要说些什么,却不知道从哪开始."形而上谓之道,形而下谓之器".与其坐而论道,不如脚踏实地,从最实用的地方开始. 我们先来看看wpf中的grid控件.grid控件是个网格的布局控件 ...
- Clion下jni配置
Clion非常适合写C++程序 首先把C:\Program Files\Java\jdk1.7.0_79\include和C:\Program Files\Java\jdk1.7.0_79\inclu ...
- VS,连接到oracle 报要升级到8.多少版本的错
1:确定服务器的oracle版本 2:本地的客户端版本要和服务器一致 3:操作系统位数要一致
- Centos网口流量实时监控
iptraf方式 [root@kazihuo ~]# yum -y install iptraf [root@kazihuo ~]# iptraf-ng-ng 开启服务日志: 进入细节监控后提示日志路 ...
- websocket使用指南
前言 最近在一个项目中,需要使用到websocket,之前对websocket不是很了解,于是就花了一点时间来熟悉websocket. 在浏览器与服务器通信间,传统的 HTTP 请求在某些场景下并不理 ...
- 【漏洞】PHPCMS_V9.6.0 前台注册GETSHELL
首先准备一台公网服务器,在上面新建一个一句话的txt文件.如下: 接着打开目标网站,点击注册,填写信息后点击提交,拦截该数据包. 将其中post提交的数据替换成我们的poc,poc如下: siteid ...
- Redis主从集群的Sentinel配置
http://www.cnblogs.com/LiZhiW/p/4851631.html