zoukankan      html  css  js  c++  java
  • [React] Implement a React Context Provider

    If you have state that needs to exist throughout your application, then you may find yourself passing props all over the application and even "drilling" the prop through components that don't really care about the prop at all. In this lesson, we'll see a sample of a small app that has the "prop drilling problem" and learn how to implement the "Provider pattern" to access context state anywhere in the component tree.

    To implement a context provider for render props:

    class ToggleProvider extends React.Component {
      static contextName = '__toggle__'
      static Renderer = class extends React.Component {
        static childContextTypes = {
          [ToggleProvider.contextName]:
            PropTypes.object.isRequired,
        }
        getChildContext() {
          return {
            [ToggleProvider.contextName]: this.props
              .toggle,
          }
        }
        render() {
          return this.props.children
        }
      }
      render() {
        const {
          children,
          ...remainingProps
        } = this.props
        return (
          <Toggle
            {...remainingProps}
            render={toggle => (
              <ToggleProvider.Renderer
                toggle={toggle}
                children={children}
              />
            )}
          />
        )
      }
    }
    
    function ConnectedToggle(props, context) {
      return props.render(
        context[ToggleProvider.contextName],
      )
    }
    ConnectedToggle.contextTypes = {
      [ToggleProvider.contextName]:
        PropTypes.object.isRequired,
    }

    Modify the code:

  • 相关阅读:
    集合综合练习<三>
    集合综合练习<二>
    集合综合练习<一>
    java打分系统
    mysql存储过程
    mysql的视图、索引、触发器、存储过程
    mysql
    Java 集合底层原理剖析(List、Set、Map、Queue)
    HashMap底层实现
    Gradle
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8058054.html
Copyright © 2011-2022 走看看