When making a reusable component, you'll find that people often like to have the API they're most familiar with, so in this lesson we'll recreate the withToggle Higher Order Component using our new ConnectedToggle render prop component.

function withToggle(Component) {
function Wrapper(props, context) {
const {innerRef, ...remainingProps} = props
return (
<ConnectedToggle
render={toggle => (
<Component
{...remainingProps}
toggle={toggle}
ref={innerRef}
/>
)}
/>
)
}
Wrapper.displayName = `withToggle(${Component.displayName ||
Component.name})`
Wrapper.propTypes = {innerRef: PropTypes.func}
Wrapper.WrappedComponent = Component
return hoistNonReactStatics(Wrapper, Component)
}

[React] Implement a Higher Order Component with Render Props的更多相关文章

  1. [React] Cleanly Map Over A Stateless Functional Component with a Higher Order Component

    In this lesson we'll create a Higher Order Component (HOC) that takes care of the key property that ...

  2. [React Intl] Use a react-intl Higher Order Component to format messages

    In some cases, you might need to pass a string from your intl messages.js file as a prop to a compon ...

  3. [React] Use React.ReactNode for the children prop in React TypeScript components and Render Props

    Because @types/react has to expose all its internal types, there can be a lot of confusion over how ...

  4. 可复用 React 的 HOC 以及的 Render Props

    重复是不可能的,这辈子都不可能写重复的代码 当然,这句话分分钟都要被产品(领导)打脸,真的最后一次改需求,我们烦恼于频繁修改的需求 虽然我们不能改变别人,但我们却可以尝试去做的更好,我们需要抽象,封装 ...

  5. [React] Use React.memo with a Function Component to get PureComponent Behavior

    A new Higher Order Component (HOC) was recently released in React v16.6.0 called React.memo. This be ...

  6. [React] Higher Order Components (replaces Mixins)

    Higher order components will allow you to apply behaviors to multiple React components. So the idea ...

  7. [React] Implement a React Context Provider

    If you have state that needs to exist throughout your application, then you may find yourself passin ...

  8. [React] Creating a Stateless Functional Component

    Most of the components that you write will be stateless, meaning that they take in props and return ...

  9. React Render Props 模式

    概述 Render Props模式是一种非常灵活复用性非常高的模式,它可以把特定行为或功能封装成一个组件,提供给其他组件使用让其他组件拥有这样的能力,接下来我们一步一步来看React组件中如何实现这样 ...

随机推荐

  1. 4月17日 (PS:由于时间问题,现在才发,望老师见谅)疯狂猜成语-----第三次站立会议 参会人员:杨霏,袁雪,胡潇丹,郭林林,尹亚男,赵静娜

    疯狂猜成语-----第三次站立会议 参会人员:杨霏,袁雪,胡潇丹,郭林林,尹亚男,赵静娜 会议内容: 组员依次汇报自己的工作进度,并且提出自己在进行任务的过程中遇到的问题,是否解决以及解决办法. 以下 ...

  2. win10 无法访问XP 共享目录原因

    win10 无法访问XP 共享目录原因     *现象:  在地址栏中输入\\192.168.100.5 (XP文件服务器),出现:.....找不到网络路径, 此连接尚未还原.             ...

  3. CentOS 7在grub rescue模式中修复系统

    安装完CentOS 7后 修改硬盘分区后,系统重启后,无法正常启动,进入grub rescue模式: 网上大多数centos grub rescue的资料应该是Centos 7之前的,其中提到的命令很 ...

  4. redhat7.5 升级OpenSSH_7.8p1

    1:拷贝编译好rpm安装包 [root@liwm ~]# scp -r root@192.168.31.130:/home/openssh7.8 /home/ root@192.168.31.130' ...

  5. 【codeforces 335A】Banana

    [题目链接]:http://codeforces.com/contest/335/problem/A [题意] 让你构造一个长度为n的字符串; 每次你可以从这个字符串中任意取走字符; 让你求出取的次数 ...

  6. Java基础学习总结(1)——equals方法

    一.equals方法介绍 1.1.通过下面的例子掌握equals的用法 package cn.galc.test; public class TestEquals { public static vo ...

  7. 推断扫描后的内容是否是URL

    扫描的明明是Url.竟然当文本给处理了,看来正则没有通过. 扫描二维码后,我參考了QQ的效果.分了三种:网页地址.文件下载地址,文本信息:为了实现这样的效果.我 发现有非常多url非常奇葩.所以就想找 ...

  8. IOS中UIImagePickerController中文界面问题

    今天沈阳斌子,写IOS项目遇到一个调用照相机的问题,找到解决方法,高速攻克了拿给PM看,结果PM说程序调用的照相机不是中文的是英文的.必须改成中文.上网找到了方法.试用后好用拿出来和大家分享.方法例如 ...

  9. 怎么样才算是精通 C++?

    C++是一门非常奇妙的语言.让人又爱又恨. 在知乎上看到的一个帖子.怎么样才算是精通C++,这里节选一些精彩的回复. 链接:http://www.zhihu.com/question/20201972 ...

  10. IP address could not be resolved: Temporary failure in name resolution

    今早发现mysql日志中有非常多例如以下的警告: 140724 18:41:25 [Warning] IP address '172.16.18.217' could not be resolved: ...