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. NOIP2010题解

    所有题目链接均来自洛谷 T1机器翻译 原题戳这里 自古T1是水题 因为每一个数字都小于1000,所以对于是否在队列中可以开数组查询 对于大小的限制,弄一个队列维护大小即可(水题呀...) 这题在Win ...

  2. 【HAOI2015】树上操作(树链剖分)

    题面 Description 有一棵点数为N的树,以点1为根,且树点有边权.然后有M个操作,分为三种: 操作1:把某个节点x的点权增加a. 操作2:把某个节点x为根的子树中所有点的点权都增加a. 操作 ...

  3. UWP 使用UCT的Markdown控件

    之前在网上偶然碰到过 一个在线的Markdown Text编辑器 http://mahua.jser.me/,功能很齐全. 然后就突然有了一个大胆的想法 这个玩意要是在uwp中实现,用来做更新日志说明 ...

  4. Error:Execution failed for task ':app:processDebugGoogleServices'. > No matching client found for package name 'com.fortythree.sos.flashlight'

    Q:导入json文件时的包名不对 A:包名存在的位置是app build gradle中的applicationID

  5. nodejs辅助前台开发系列(1) 搭建简单HTML开发环境

    搭建简单的html开发环境一般需要解决两个问题: 文本编辑器 WebServer集成 在文本编辑器选择上,VS Code 无疑是一匹黑马,谁用谁知道.WebServer集成nodejs对前端来说最为友 ...

  6. 关于在Editplus中设置内容提示比如syso的快捷输出的方法

    在Editplus中默认的内容提示是很少的,比如我们最常用的syso快捷输出就没有,那么怎么来设置呢? 首先打开工具-首选项: 然后打开文件类型及语法-在文件类型中打开Java,如图: 然后打开 我们 ...

  7. canvas画布,时钟

    原理代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  8. Win7硬盘的AHCI模式

    1.什么是硬盘的AHCI模式? AHCI是串行ATA高级主控接口的英文缩写,它是Intel所主导的一项技术,它允许存储驱动程序启用高级SATA功能,如本机命令队列(NCQ)和热插拔.开启AHCI之后可 ...

  9. 聊聊Docker

    为什么是Docker 进入21世纪,继互联网之后,云计算开始大放异彩.云计算是互联网发展后期的必然方向,反过来,云计算也进一步推动了互联网的发展.云计算模式最关键的突破就是资源使用方式的改变. 云计算 ...

  10. Cesium 获取鼠标当前位置的模型高度,地形高度,OSGB高度,及其经纬度。

    var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene._imageryLayerCollection);var ray,posit ...