#15 高阶组件 + context


  • 0

    const makeProvider = data => WrappedComponent => {
      class NewComponent extends React.Component {
        constructor () {
          super()
          this.state = {
            data: data
          }
        }
        
        static childContextTypes = {
          data: PropTypes.string
        }
        
        getChildContext () {
          return {
            data: this.state.data
          }
        }
        
        render () {
          return (
            <WrappedComponent
              {...this.props}
            />
          )
        }
      }
      return NewComponent
    }
    

  • 0

    const makeProvider = (data) => (WrappedComponent) => {
      return class extends Component { //使用匿名类
        static childContextTypes = {
          data: PropTypes.any.isRequired
        }
        getChildContext() {
          return { data } //使用ES6对象属性简写
        }
        render() {
          return <WrappedComponent />
        }
      }
    }
    

  • 1

    const makeProvider = data => WrappedComponent => class extends Component {
      static childContextTypes = {
        data: PropTypes.any
      }
      
      getChildContext() {
        return {data};
      }
      
      render() {
        return (<WrappedComponent />);
      }
    }
    
    

  • 0

    const makeProvider = data => TComponent => {
      class WithProviderComponent extends Component {
        static childContextTypes = {
          data: PropTypes.any
        }
        
        getChildContext() {
          return {
            data
          }
        }
        
        render() {
          return <TComponent {...this.props} />
        }
      }
      
      return WithProviderComponent
    }
    

  • 0

    const makeProvider = /* TODO */
    (obj) => (Com) => class extends Component {
      static childContextTypes = {
        data: PropTypes.any.isRequired
      }
      constructor () {
        super()
        this.state = {
          data: obj
        }
      }
      getChildContext () {
        return {
          data: this.state.data
        }
      }
      
      render () {
        return <Com data={this.state.data}/>
      }
    }   
    

  • 0

    主要是理解高阶组件其实就是包裹了一个组件的组件,然后context不是说通过继承来共享的,而是通过包裹来共享的。

    const makeProvider = (any_arg) => {
      return (AComponent) => {
        class WrapperComponent extends Component {
          static childContextTypes = {
            data: PropTypes.object
          }
           
          getChildContext () {
            return {
              data: any_arg
            }
          }
          
          render() {
            return (<AComponent />)
          }
        }
        
        return WrapperComponent;
      }
    }
    

  • 0

    const makeProvider = data => WrapperComponent => {
      return class NewComponent extends Component {
        static childContextTypes = {
          data: PropTypes.object.isRequired,
        }
    
        getChildContext() {
          return {
            data,
          }
        }
    
        render() {
          return (
            <div>
              <WrapperComponent />
            </div>
          )
        }
      }
    }
    

  • 0

    <code>
    const makeProvider = (data) => (WrapComponent) => {
    return class extends Component {
    static childContextTypes = {
    data: PropTypes.object
    }
    constructor() {
    super()
    this.state = {data}
    }
    getChildContext () {
    return { data: this.state.data }
    }
    render() {
    return <WrapComponent />
    }
    }
    }

    </code>


  • 0

    const makeProvider = data => Comp => class extends Component {
      static childContextTypes = {
        data: PropTypes.any
      }
      
      getChildContext () {
        return { data }
      }
    
      render () {
        return <Comp {...this.props}/>
      }
    }
    

  • 0

    @贾维尔麦基 getChildContext()要返回的是一个对象不是一个函数,改成{data:this.state.data}就可以了


登录后回复
 

与 ScriptOJ 的连接断开,我们正在尝试重连,请耐心等待