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 ...
随机推荐
- 分享一下我进入IT行业的经历
今天突然根想写博客,就注册了一个,分享一下我的成长经历. 我第一次接触编程的时候是在上大学的时候,我学的专业是工程测量接触的第一个语言是vb,我记得很清楚,我当时写出第一个小Demo是的心情,感觉到了 ...
- 禁被ping 软件漏洞升级
禁被ping:echo “net.ipv4.icmp_echo_ignore_all=1” /etc/sysctl.conf 软件漏洞升级:yum install openssh bash -y
- 浏览器兼容CSS渐进增强 VS 优雅降级如何选择
由于低级浏览器不支持 CSS3,但是 CSS3 特效太优秀不忍放弃,所以在高级浏览器中使用CSS3,而在低级浏览器只保证最基本的功能.二者的目的都是关注不同浏览器下的不同体验,但是它们侧重点不同,所以 ...
- 重磅消息-Service Fabric 正式开源
微软的Azure Service Fabric的官方博客在2017.3.24日发布了一篇博客 Service Fabric .NET SDK goes open source ,介绍了社区呼声最高的S ...
- JavaScript ES6 的let和const
1 作用域和提升 1.1 作用域(Scope) 某个变量名或者函数名,在某个程序片段中是否可见或者可访问,如果是,那么这个程序片段就是这个变量名或者函数名的作用域.比如: var name = &qu ...
- 本地mysql无法连接原来是这里有问题啊。。。。。。
1.怎么解决localhost无法链接本地mysql数据库问题_百度经验http://jingyan.baidu.com/article/d45ad14896d1cd69542b805c.html 2 ...
- postgresql和oracle数据库对比
SQL执行计划干预 从使用postgresql来看,想要改变执行计划只能通过対表进行分析,不能通过添加hint的方式来改变执行计划: oracle不仅可以通过对表进行收集统计来改变执行计划,而且很重要 ...
- Python基础-week04
本节内容摘要:#Author:http://www.cnblogs.com/Jame-mei 装饰器 迭代器&生成器 Json & pickle 数据序列化 软件目录结构规范 作业:A ...
- MyBatis报错:Caused by: java.lang.NumberFormatException: For input string: "XX"
<select id="sltTreatment" resultType="com.vitaminmd.sunny.core.bo.Treatment"& ...
- 吐槽net下没有靠谱的FastDFS的sdk之使用thrift实现JAVA和C#互通
事情是这样的,在一个新项目中引入了fastdfs,用这玩意做一些小数据的存储还是很方便的,然后在nuget上就找一个对接FastDFS的sdk,如下图: 一眼就看到了这个top1的sdk,应该会比较靠 ...