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 ...
随机推荐
- 【洛谷2055】【CJOJ2487】【ZJOI2009】 假期的宿舍
题面 题目描述 学校放假了 · · · · · · 有些同学回家了,而有些同学则有以前的好朋友来探访,那么住宿就是一个问题.比如 A 和 B 都是学校的学生,A 要回家,而 C 来看B,C 与 A 不 ...
- [SCOI2007]蜥蜴
网络流 一个点拆成两个,注意要把某一类边连反过来 这样才能保证有限制 # include <bits/stdc++.h> # define IL inline # define RG re ...
- [BZOJ1430] 小猴打架 (prufer编码)
Description 一开始森林里面有N只互不相识的小猴子,它们经常打架,但打架的双方都必须不是好朋友.每次打完架后,打架的双方以及它们的好朋友就会互相认识,成为好朋友.经过N-1次打架之后,整个森 ...
- linux系统文件扩展名介绍
1.源码tar.tar.gz .tgz.zip.tar.bz 表示压缩文件,创建命令等 2.sh表示shell脚本文件,通过shell语言开发的程序. 3.pl 表示perl语言文件,通过perl语言 ...
- tomcat环境配置 Linux 与 Windows
Windows:例如tomcat安装在 E:\tomcat 需要在环境变量配置:CATALINA_HOME=E:\tomcat CATALINA_BASE= E:\tomcat Linux:例如tom ...
- js备战春招の四の正则表达式详解
正则表达式语法规则:/正则表达式主体/修饰符(可选)什么是正则表达式:正则表达式是用于匹配字符串中字符组合的模式.在 JavaScript中,正则表达式也是对象.这些模式被用于 RegExp 的 ex ...
- R实战 第五篇:绘图(ggplot2)
ggplot2包实现了基于语法的.连贯一致的创建图形的系统,由于ggplot2是基于语法创建图形的,这意味着,它由多个小组件构成,通过底层组件可以构造前所未有的图形.ggplot2可以把绘图拆分成多个 ...
- Attrib +s +a +h +r 隐藏文件原理与破解
制作了一个PE启动盘,不过这个启动盘不能深度隐藏,否则没效果,可以又想不让别人看见PE启动盘的一些内容,防止别人误删或者修改,于是就想找一种可以隐藏文件的方法,普通的隐藏文件的方法如下:
- Linux环境下安装weblogic10.3.2
附件:weblogic10.3.2版本zip包和部署war包提取地址: weblogic.zip:https://pan.baidu.com/s/1Y1tmAhlXsO5Q4zPvOKGG5g 提取 ...
- MSIL实用指南-创建方法和定义参数
本篇讲解实现创建方法.指定参数的名称.实现参数加out和ref修饰符.以及参数加默认值. 创建方法 创建方法用类TypeAttributes的 DefineMethod(string name, Me ...