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 ...
随机推荐
- 【BZOJ3924】幻想乡战略游戏(动态点分治)
[BZOJ3924]幻想乡战略游戏(动态点分治) 题面 权限题...(穷死我了) 洛谷 题解 考虑不修改 发现一个贪心的做法 假设当前放在当前位置 如果它有一个子树的兵的总数大于总数的一半 那么,放到 ...
- BZOJ第1页养成计划
嗯,用这篇博客当一个目录,方便自己和学弟(妹?)们查阅.不定期更新. BZOJ1000 BZOJ1001 BZOJ1002 BZOJ1003 BZOJ1004 BZOJ1005 ...
- java 动态代理 , 多看看。 多用用。
import java.lang.reflect.InvocationHandler; import java.lang.reflect.Proxy; import java.lang.reflect ...
- Windows下Python环境的搭建
我刚开始接触Python没多久,当然这也是为初学者来更好的去入门Python,我电脑上既跑着Windows也跑着Red Hat的Linux,相比较而言,开发我还是更青睐于Linux系统,很多开发工具红 ...
- 【翻译】《向“弹跳球”演示程序添加新功能》 in MDN
文章地址: https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Objects/%E5%90%91%E2%80%9C%E5%BC%B9% ...
- jQuery学习笔记之extend方法小结
在学习jQuery的时候,学习到了$.extend的主要用法,在此做一个简单的总结. (1)当只写一个对象自变量时,拓展的是jQuery的工具方法,如: $.extend({ aaa:function ...
- pycharm创建Flask项目,jinja自动补全,flask智能提示
pycharm创建Flask项目,jinja自动补全,flask智能提示 之前一直都是用在idea里创建空项目然后导入,之后就没有各种的智能提示,在选择文类,选择模板之类的地方就会很麻烦. 步骤1:用 ...
- es6 Generator生成器函数
生成器函数使用function*声明. 在生成器函数内部,有一种类似return的语法:关键字yield.二者的区别是,普通函数只可以return一次,而生成器函数可以yield多次(当然也可以只yi ...
- ASCII代码
ASCII(American Standard Code for Information Interchange,美国标准信息交换代码)是基于拉丁字母的一套电脑编码系统,主要用于显示现代英语和其他西欧 ...
- 06_java 时间获取练习_Date\SimpleDateFormat\Calendar类练习
1.获取当前的日期,并把这个日期转换为指定格式的字符串,如2088-08-08 08:08:08 import java.text.SimpleDateFormat; import java.uti ...