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 ...
随机推荐
- 使用zxing生成解析二维码
1. 前言 随着移动互联网的发展,我们经常在火车票.汽车票.快餐店.电影院.团购网站以及移动支付等各个场景下见到二维码的应用,可见二维码以经渗透到人们生活的各个方面.条码.二维码以及RFID被人们应用 ...
- mysql压缩包安装方式
从官网https://dev.mysql.com/downloads/mysql/上下载mysql-5.6.31-winx64.zip,将其解压,接下来的安装是通过命令来安装MySQL数据库的.(P. ...
- 在Debian系列Linux系统Ubuntu上安装配置yum的试验
用习惯了Red Hat系统的都知道我们习惯于三种安装方式:一种是rpm包的方式安装,一种就是tar包的方式来安装,还有一种方式就是yum源的安装. 首先rpm包的用法,我们一般是在Red Hat光驱里 ...
- 关于KPM算法
[转]从头到尾彻底理解KMP http://blog.csdn.net/v_july_v/article/details/7041827 int* GetNextval(char* p){ int p ...
- 通过银行卡号识别归属银行,php方式
这个例子不是很全,要做到齐全必须使用数据库字典来索引,而且数据量庞大,建议生产使用时限制几大行就行,直接不支持其他小行.此案例抛砖引玉 /** * 银行卡信息识别相关类 * 把bin号转化为长整形,再 ...
- Golang的CSP很酷?其实.NET也可以轻松完成
说起Golang(后面统称为Go),就想到他的高并发特性,在深入一些就是 Goroutine.在大家被它优雅的语法和简洁的代码实现的高并发程序所折服时,其实C#/.NET也可以很容易的做到.今天我们来 ...
- Vuejs实例-使用vue-cli创建项目
1,首先从官方网站下载安装Node.js,建议使用6.x版本,同时也会一并安装npm工具,npm>3.10以上. 2,npm安装很慢(国外服务器),所以一般推荐使用npm淘宝镜像cnpm,先安装 ...
- 在线教育平台搭建 预览和models
一.前言 1.1.项目介绍 在线演示地址:mxonline.mtianyan.cn 开发环境: python:3.6.4 Django:2.0.2 后台管理:xadmin 系统概括: 系统具有完整的用 ...
- Jenkins 部署 jmeter + Ant
安装Jenkins: 到jenkins官网下载相应的jenkins版本: 双击jenkins.msi启动安装,安装目录选择D:\Progrom Files\Jenkins,然后启动成功. Jenkin ...
- JAVA获取文件数据 ( xxxxx.json )
//路径fPixFile filePath = new File(fPix);System.out.print("文件路径:" + filePath);try { if (file ...