zoukankan      html  css  js  c++  java
  • [React] Implement a Higher Order Component

    Sometimes you have some boilerplate for components that would be nice to abstract away slightly with a simple helper function. In this lesson we'll learn how to create a "Higher Order Component" which is a component factory function. We'll use it to give a given component a prop for our context value.

    // higher order components
    import React, {Fragment} from 'react'
    import hoistNonReactStatics from 'hoist-non-react-statics'
    import {Switch} from '../switch'
    
    const ToggleContext = React.createContext()
    
    class Toggle extends React.Component {
      static Consumer = ToggleContext.Consumer
      toggle = () =>
        this.setState(
          ({on}) => ({on: !on}),
          () => this.props.onToggle(this.state.on),
        )
      state = {on: false, toggle: this.toggle}
      render() {
        return (
          <ToggleContext.Provider value={this.state} {...this.props} />
        )
      }
    }
    
    function withToggle(Component) {
      function Wrapper(props, ref) {
        return (
          <Toggle.Consumer>
            {toggleContext => (
              <Component toggle={toggleContext} {...props} ref={ref} />
            )}
          </Toggle.Consumer>
        )
      }
      Wrapper.displayName = `withToggle(${Component.displayName ||
        Component.name})`
      return hoistNonReactStatics(React.forwardRef(Wrapper), Component)
    }
    
    const Layer1 = () => <Layer2 />
    const Layer2 = withToggle(({toggle: {on}}) => (
      <Fragment>
        {on ? 'The button is on' : 'The button is off'}
        <Layer3 />
      </Fragment>
    ))
    const Layer3 = () => <Layer4 />
    const Layer4 = withToggle(({toggle: {on, toggle}}) => (
      <Switch on={on} onClick={toggle} />
    ))
    
    function Usage({
      onToggle = (...args) => console.log('onToggle', ...args),
    }) {
      return (
        <Toggle onToggle={onToggle}>
          <Layer1 />
        </Toggle>
      )
    }
    Usage.title = 'Higher Order Components'
    
    export {Toggle, withToggle, Usage as default}

    hoist-non-react-statics: Copies non-react specific statics from a child component to a parent component. Similar to Object.assign, but with React static keywords prevented from being overridden.
  • 相关阅读:
    C++ Websites
    C++ smart pointer
    Use of ‘const’ in Functions Return Values
    Meaning of “const” last in a C++ method declaration?
    为什么不要使用"using namespace XXX"
    android.os.Handler
    Windows下Anaconda的安装和简单使用
    matlab GPU 操作
    matlab 在柱状图上 显示数字
    How to fix apt-get GPG error NO_PUBKEY Ubuntu 14
  • 原文地址:https://www.cnblogs.com/Answer1215/p/13596455.html
Copyright © 2011-2022 走看看