Learn how to use the ‘withProps’ higher order component to pre-fill a prop, unable to be overridden.

const { Component } = React;
const { withProps } = Recompose; // with function as arguement
const HomeLink = withProps(({ query }) => ({ href: '#/?query=' + query }))('a');
// take object as arguement
const ProductsLink = withProps({ href: '#/products' })('a');
const CheckoutLink = withProps({ href: '#/checkout' })('a'); const App = () =>
<div className="App">
<header>
<HomeLink query="logo">Logo</HomeLink>
</header>
<nav>
<HomeLink>Home</HomeLink>
<ProductsLink>Products</ProductsLink>
<CheckoutLink>Checkout</CheckoutLink>
</nav>
</div>; ReactDOM.render(
<App />,
document.getElementById('main')
);

withProps, take string as arguement for creating a new DOM element.

[Recompose] Lock Props using Recompose -- withProps的更多相关文章

  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] 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 ...

  3. [Recompose] Stream Props to React Children with RxJS

    You can decouple the parent stream Component from the mapped React Component by using props.children ...

  4. 乘风破浪,遇见Android Jetpack之Compose声明式UI开发工具包,逐渐大一统的原生UI绘制体系

    什么是Android Jetpack https://developer.android.com/jetpack Android Jetpack是一个由多个库组成的套件,可帮助开发者遵循最佳做法.减少 ...

  5. [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 ...

  6. [Recompose] Compute Expensive Props Lazily using Recompose

    Learn how to use the 'withPropsOnChange' higher order component to help ensure that expensive prop c ...

  7. [Recompose] Refactor React Render Props to Streaming Props with RxJS and Recompose

    This lesson takes the concept of render props and migrates it over to streaming props by keeping the ...

  8. [Recompose] Make Reusable React Props Streams with Lenses

    If you hard-code a stream of props to target a specific prop, it becomes impossible to reuse that st ...

  9. [Recompose] Set the HTML Tag of a Component via a Prop using Recompose

    Learn how to user the ‘componentFromProp’ helper and ‘defaultProps’ higher order component to swap t ...

随机推荐

  1. [AngularFire2 & Firestore] Example for collection and doc

    import {Injectable} from '@angular/core'; import {Skill} from '../models/skills'; import {AuthServic ...

  2. JAVASE学习笔记:第十章 SWing经常使用控件类(二)

    7.JComboBox 下拉列表         /*   * 初始化下拉列表   */  public void addcomb(){   String[] area = {"山西省&qu ...

  3. js---BOM 的理解方法

    windows 方法 window.close(); //关闭窗口   window.alert("message"); //弹出一个具有OK按钮的系统消息框,显示指定的文本   ...

  4. Elasticsearch之es学习工作中遇到的坑(陆续更新)

    1:es集群脑裂问题(不要用外网ip,节点角色不要混用) 原因1:阿里云服务器,外网有时候不稳定. 解决方案:单独采购服务器,内网安装 原因2:master和node节点没有分开 解决方案: 分角色: ...

  5. 阅读笔记——Web应用程序

    Web应用程序与DD文件 Web应用程序 web应用程序是一种可以通过Web访问的应用程序.Web应用程序最大的好处是永和很容易访问应用程序.用户只需要有浏览器即可,不需要安装其他任何软件.一个Web ...

  6. adapter-自定义adapter的典型写法

    文章参考 http://www.cnblogs.com/mengdd/p/3254323.html import android.content.Context; import android.vie ...

  7. 51Nod——N1284 2 3 5 7的倍数

    https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1284 基准时间限制:1 秒 空间限制:131072 KB 分值: 5  ...

  8. 洛古——P1433 吃奶酪

    https://www.luogu.org/problem/show?pid=1433 题目描述 房间里放着n块奶酪.一只小老鼠要把它们都吃掉,问至少要跑多少距离?老鼠一开始在(0,0)点处. 输入输 ...

  9. C#调用天气预报网络服务

    本程序通过调用网络上公开的天气预报网络服务来显示某个地区三天的天气,使用到的网络服务地址:http://www.webxml.com.cn/WebServices/WeatherWebService. ...

  10. php课程 11-37 类和对象的关系是什么

    php课程 11-37 类和对象的关系是什么 一.总结 一句话总结:类生成对象,对象是类的实例化,一定是先有类,后有对象,一定是先有标准,再有个体. 1.oop的三大优势是什么? 重用性,灵活性.扩展 ...