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的更多相关文章

  1. [Recompose] Transform Props using Recompose --mapProps

    Learn how to use the 'mapProps' higher-order component to modify an existing component’s API (its pr ...

  2. [Recompose] When nesting affects Style

    In CSS we use the descendant selector to style elements based on their nesting. Thankfully in React ...

  3. [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 ...

  4. [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 ...

  5. react recompose

    避免写嵌套 import { compose } from "recompose"; function Message(props) { const { classes } = p ...

  6. [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 ...

  7. [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 ...

  8. [Recompose] Stream Props to React Children with RxJS

    You can decouple the parent stream Component from the mapped React Component by using props.children ...

  9. [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 ...

随机推荐

  1. 【BZOJ3924】幻想乡战略游戏(动态点分治)

    [BZOJ3924]幻想乡战略游戏(动态点分治) 题面 权限题...(穷死我了) 洛谷 题解 考虑不修改 发现一个贪心的做法 假设当前放在当前位置 如果它有一个子树的兵的总数大于总数的一半 那么,放到 ...

  2. BZOJ第1页养成计划

    嗯,用这篇博客当一个目录,方便自己和学弟(妹?)们查阅.不定期更新. BZOJ1000   BZOJ1001   BZOJ1002   BZOJ1003   BZOJ1004   BZOJ1005   ...

  3. java 动态代理 , 多看看。 多用用。

    import java.lang.reflect.InvocationHandler; import java.lang.reflect.Proxy; import java.lang.reflect ...

  4. Windows下Python环境的搭建

    我刚开始接触Python没多久,当然这也是为初学者来更好的去入门Python,我电脑上既跑着Windows也跑着Red Hat的Linux,相比较而言,开发我还是更青睐于Linux系统,很多开发工具红 ...

  5. 【翻译】《向“弹跳球”演示程序添加新功能》 in MDN

    文章地址: https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Objects/%E5%90%91%E2%80%9C%E5%BC%B9% ...

  6. jQuery学习笔记之extend方法小结

    在学习jQuery的时候,学习到了$.extend的主要用法,在此做一个简单的总结. (1)当只写一个对象自变量时,拓展的是jQuery的工具方法,如: $.extend({ aaa:function ...

  7. pycharm创建Flask项目,jinja自动补全,flask智能提示

    pycharm创建Flask项目,jinja自动补全,flask智能提示 之前一直都是用在idea里创建空项目然后导入,之后就没有各种的智能提示,在选择文类,选择模板之类的地方就会很麻烦. 步骤1:用 ...

  8. es6 Generator生成器函数

    生成器函数使用function*声明. 在生成器函数内部,有一种类似return的语法:关键字yield.二者的区别是,普通函数只可以return一次,而生成器函数可以yield多次(当然也可以只yi ...

  9. ASCII代码

    ASCII(American Standard Code for Information Interchange,美国标准信息交换代码)是基于拉丁字母的一套电脑编码系统,主要用于显示现代英语和其他西欧 ...

  10. 06_java 时间获取练习_Date\SimpleDateFormat\Calendar类练习

     1.获取当前的日期,并把这个日期转换为指定格式的字符串,如2088-08-08 08:08:08 import java.text.SimpleDateFormat; import java.uti ...