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. 【洛谷2055】【CJOJ2487】【ZJOI2009】 假期的宿舍

    题面 题目描述 学校放假了 · · · · · · 有些同学回家了,而有些同学则有以前的好朋友来探访,那么住宿就是一个问题.比如 A 和 B 都是学校的学生,A 要回家,而 C 来看B,C 与 A 不 ...

  2. [SCOI2007]蜥蜴

    网络流 一个点拆成两个,注意要把某一类边连反过来 这样才能保证有限制 # include <bits/stdc++.h> # define IL inline # define RG re ...

  3. [BZOJ1430] 小猴打架 (prufer编码)

    Description 一开始森林里面有N只互不相识的小猴子,它们经常打架,但打架的双方都必须不是好朋友.每次打完架后,打架的双方以及它们的好朋友就会互相认识,成为好朋友.经过N-1次打架之后,整个森 ...

  4. linux系统文件扩展名介绍

    1.源码tar.tar.gz .tgz.zip.tar.bz 表示压缩文件,创建命令等 2.sh表示shell脚本文件,通过shell语言开发的程序. 3.pl 表示perl语言文件,通过perl语言 ...

  5. tomcat环境配置 Linux 与 Windows

    Windows:例如tomcat安装在 E:\tomcat 需要在环境变量配置:CATALINA_HOME=E:\tomcat CATALINA_BASE= E:\tomcat Linux:例如tom ...

  6. js备战春招の四の正则表达式详解

    正则表达式语法规则:/正则表达式主体/修饰符(可选)什么是正则表达式:正则表达式是用于匹配字符串中字符组合的模式.在 JavaScript中,正则表达式也是对象.这些模式被用于 RegExp 的 ex ...

  7. R实战 第五篇:绘图(ggplot2)

    ggplot2包实现了基于语法的.连贯一致的创建图形的系统,由于ggplot2是基于语法创建图形的,这意味着,它由多个小组件构成,通过底层组件可以构造前所未有的图形.ggplot2可以把绘图拆分成多个 ...

  8. Attrib +s +a +h +r 隐藏文件原理与破解

    制作了一个PE启动盘,不过这个启动盘不能深度隐藏,否则没效果,可以又想不让别人看见PE启动盘的一些内容,防止别人误删或者修改,于是就想找一种可以隐藏文件的方法,普通的隐藏文件的方法如下:

  9. Linux环境下安装weblogic10.3.2

    附件:weblogic10.3.2版本zip包和部署war包提取地址: weblogic.zip:https://pan.baidu.com/s/1Y1tmAhlXsO5Q4zPvOKGG5g  提取 ...

  10. MSIL实用指南-创建方法和定义参数

    本篇讲解实现创建方法.指定参数的名称.实现参数加out和ref修饰符.以及参数加默认值. 创建方法 创建方法用类TypeAttributes的 DefineMethod(string name, Me ...