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. 【洛谷1855】 榨取kkksc03

    题面 前面省去一堆背景内容 洛谷的运营组决定,如果一名oier向他的教练推荐洛谷,并能够成功的使用(成功使用的定义是:该团队有20个或以上的成员,上传10道以上的私有题目,布置过一次作业并成功举办过一 ...

  2. 【CJOJ2498】【DP合集】最长上升子序列 LIS

    题面 Description 给出一个 1 ∼ n (n ≤ 10^5) 的排列 P 求其最长上升子序列长度 Input 第一行一个正整数n,表示序列中整数个数: 第二行是空格隔开的n个整数组成的序列 ...

  3. c++ STL容器适配器

    一.标准库顺序容器适配器的种类     标准库提供了三种顺序容器适配器:queue(FIFO队列).priority_queue(优先级队列).stack(栈)   二.什么是容器适配器     &q ...

  4. 【Spring源码分析】配置文件读取流程

    前言 Spring配置文件读取流程本来是和http://www.cnblogs.com/xrq730/p/6285358.html一文放在一起的,这两天在看Spring自定义标签的时候,感觉对Spri ...

  5. 8086的分段寻址技术学习总结(Segmented Addressing)

    计算机最小粒度的数据单位是bit,但是为每个bit都分配地址不仅浪费资源,同时存取效率低.因此转而用8bits(也就是1个字节,1byte)来占用一个地址. 那么16位的地址线能够访问的地址空间大小为 ...

  6. cdlinux可以安装在c盘

    以前一直以为cdlinux只能安装在优盘上,今天发现还可以安装在c盘,也就成了双系统,然后发现这个还是和grub4dos有关,grub4dos好厉害啊,然后不同的制作软件,不管是优盘还是直接安装在电脑 ...

  7. C#判断某个类是否派生某个类或是否实现了某个接口

    is和as is关键字可以确定对象实例或表达式结果是否可转换为指定类型.基本语法: expr is type 如果满足以下条件,则 is 语句为 true: expr 是与 type 具有相同类型的一 ...

  8. 【redis源码阅读】redis对象

    结构定义 在redis中,对象的数据结构定义如下: ​typedef struct redisObject { ​unsigned type:4; ​unsgined encoding:4; ​uns ...

  9. NGUI_Font

    三.NGUI中的UI字体制作 1.概述: 系统中提供的字体 比较少,而UI字体又是使用最为频繁的,不能因为单一的字体而损失用户量,则这个时候我们就可以通过Font Maker进行字体的制作. 2.动态 ...

  10. Java DualPivotQuickSort 双轴快速排序 源码 笔记

    DualPivotQuicksort source code 这个算法是Arrays.java中给基本类型的数据排序使用的具体实现.它针对每种基本类型都做了实现,实现的方式有稍微的差异,但是思路都是相 ...