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. (2)Deep Learning之线性单元和梯度下降

    往期回顾 在上一篇文章中,我们已经学会了编写一个简单的感知器,并用它来实现一个线性分类器.你应该还记得用来训练感知器的『感知器规则』.然而,我们并没有关心这个规则是怎么得到的.本文通过介绍另外一种『感 ...

  2. 推荐一款有趣的APP-种子习惯

    在女朋友的影响下接触到了种子习惯的app,一开始不觉得它有多大魅力,只知道它有契约的功能,有很多人分享自己的习惯,记录生活中的点滴. 毕业回家的寒假,家里比较冷,每天起床都需要莫大的勇气,挣扎半天最终 ...

  3. Bounding-box 回归

    R-CNN系列均训练了Bounding-box回归器来对窗口进行校正,其目标是学习一种转换关系将预测得到的窗口P映射为真实窗口G(Ground truth). 变换方式 可以通过简单的仿射变换以及指数 ...

  4. wpf研究之道-grid控件

    想要说些什么,却不知道从哪开始."形而上谓之道,形而下谓之器".与其坐而论道,不如脚踏实地,从最实用的地方开始. 我们先来看看wpf中的grid控件.grid控件是个网格的布局控件 ...

  5. Clion下jni配置

    Clion非常适合写C++程序 首先把C:\Program Files\Java\jdk1.7.0_79\include和C:\Program Files\Java\jdk1.7.0_79\inclu ...

  6. VS,连接到oracle 报要升级到8.多少版本的错

    1:确定服务器的oracle版本 2:本地的客户端版本要和服务器一致 3:操作系统位数要一致

  7. Centos网口流量实时监控

    iptraf方式 [root@kazihuo ~]# yum -y install iptraf [root@kazihuo ~]# iptraf-ng-ng 开启服务日志: 进入细节监控后提示日志路 ...

  8. websocket使用指南

    前言 最近在一个项目中,需要使用到websocket,之前对websocket不是很了解,于是就花了一点时间来熟悉websocket. 在浏览器与服务器通信间,传统的 HTTP 请求在某些场景下并不理 ...

  9. 【漏洞】PHPCMS_V9.6.0 前台注册GETSHELL

    首先准备一台公网服务器,在上面新建一个一句话的txt文件.如下: 接着打开目标网站,点击注册,填写信息后点击提交,拦截该数据包. 将其中post提交的数据替换成我们的poc,poc如下: siteid ...

  10. Redis主从集群的Sentinel配置

    http://www.cnblogs.com/LiZhiW/p/4851631.html