recompose mapProps
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的更多相关文章
- [Recompose] Transform Props using Recompose --mapProps
Learn how to use the 'mapProps' higher-order component to modify an existing component’s API (its pr ...
- [Recompose] When nesting affects Style
In CSS we use the descendant selector to style elements based on their nesting. Thankfully in React ...
- [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 ...
- [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 ...
- react recompose
避免写嵌套 import { compose } from "recompose"; function Message(props) { const { classes } = p ...
- [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 ...
- [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 ...
- [Recompose] Stream Props to React Children with RxJS
You can decouple the parent stream Component from the mapped React Component by using props.children ...
- [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 ...
随机推荐
- Luogu4137:Rmq Problem/mex
题面 传送门 Sol 这题可能是假的 离线莫队搞一搞,把数字再分块搞一搞,就行了 # include <bits/stdc++.h> # define IL inline # define ...
- 分享一下我进入IT行业的经历
今天突然根想写博客,就注册了一个,分享一下我的成长经历. 我第一次接触编程的时候是在上大学的时候,我学的专业是工程测量接触的第一个语言是vb,我记得很清楚,我当时写出第一个小Demo是的心情,感觉到了 ...
- 动态增加表单元素并获取元素的text和value提交
以上是效果图 需求是这样的: 专家设置好条件,然后设备检测到达到相应的条件之后,设备发出提醒给用户. 这就需要专家设置好能看懂的条件之后,然后把给专家看的,正常人能看懂的条件和发送的设备的,设备能够识 ...
- 云计算之路-阿里云上:服务器CPU 100%问题是memcached的连接数限制引起的
非常抱歉,昨天的服务器CPU 100%问题是达到 memcached 的连接数限制引起的,不是阿里云服务器的问题. 之前我们用的是阿里云“云数据库 memcached 版”,上个周末我们换成了自己搭建 ...
- Spring对IOC的理解
一.IOC控制反转和DI依赖注入 1.控制反转,字面可以理解为:主动权的转移,原来一个应用程序内的对象是类通过new去主动创建并实例化的,对对像创建的主动权在程序代码中.程序不仅要管理业务逻辑也要管理 ...
- java--抽象类实例(包含静态内部抽象类)
静态内部抽象类可以被继承. public class testfather { public static void main(String[] args) { person.talk2 a = ne ...
- 分享调用Java private方法
上周在修复bug时,发现Java类中某方法是private,且类中没有用到,第一感觉是方法多余.其实通过分析,发现原来Native Code会通过JNI调到此方法.这也给自己启发,平时做Code re ...
- Anaconda更新源
国内的网络连接Anaconda的官方源,速度基本为0,大部分时间是连接不上的.国内清华大学有对应的镜像源,可以更改为对应的源. 命令行中运行以下代码即可添加 Anaconda Python 免费仓库: ...
- mac下redis安装、设置、启动停止
下载安装 需要下载release版本,下载地址: http://download.redis.io/releases/ 我这里下载的是: http://download.redis.io/releas ...
- 无法获得数据库 'model' 上的排他锁 解决方法
解决方法: 在查询分析器中运行如下代码即可: declare @sql varchar(100) while 1=1 begin select top 1 @sql = 'kill '+cast(sp ...