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. 当relative遇上z-index,阻断事件捕获

    今天在调试前端页面的时候,发现addflowrank这个元素的click事件不能触发了.下图是它的元素结构. 用开发者工具试图定位这个元素,看看它到底怎么了.发现:无论我怎么用光标定位这个元素都定位不 ...

  2. Nginx 安装 自用

    hostnamectl set-hostname nginx systemctl stop firewalld.service systemctl disable firewalld.service ...

  3. caioj 1154 同余方程(模版)

    求x的最小正整数解,使得ax=b(mod m) 那么显然ax - b = m * y ax - my = b 那么就套入Ax+By = K的不定方程中,然后用exgcd求解即可 但这道题求最大正整数解 ...

  4. 通俗易懂,什么是.NET?什么是.NET Framework?什么是.NET Core?(转)

    通俗易懂,什么是.NET?什么是.NET Framework?什么是.NET Core?(转) 一.总结 一句话总结:.NET是一个平台,包含多种语言,比如(C#.Visual Basic.C++/C ...

  5. ThinkPHP5中find()和select()区别

    ThinkPHP5中find()和select()区别 读取数据是指读取数据表中的一行数据(或者关联数据),主要通过find方法完成,例如: 1 2 3 4 $User = M("User& ...

  6. 通过DNS通道传输的交互式PowerShell脚本

    摘自:http://www.freebuf.com/sectool/90616.html 欢迎来到一周PowerShell脚本的第五天,今天我们将讨论使用ICMP和DNS的交互式PowerShell脚 ...

  7. vue -- 7 个 有用的 Vue 开发技巧

    1 状态共享 随着组件的细化,就会遇到多组件状态共享的情况, Vuex当然可以解决这类问题,不过就像 Vuex官方文档所说的,如果应用不够大,为避免代码繁琐冗余,最好不要使用它,今天我们介绍的是 vu ...

  8. 桌面出现removable storage devices文件夹无法删除解决办法

    今天桌面突然出现 removable storage devices 文件夹,且没有删除选项. 解决办法:往电脑里插一下u盘文件夹就会自动消失了.

  9. yarn平台的任务调度和执行过程

  10. spring的quartz定时任务

    一.版本: 1.spring:4.1.7:    2.quartz:2.2.1: 二.基于ssm项目: 1.引入jar包:quartz-2.2.1.jar:spring所需包. 2.说明:quartz ...