#15 高阶组件 + context

贾维尔麦基

const makeProvider = (data) => (Post) => {
    class NewComponent extends Component {
        static childContextTypes = {
            data: PropTypes.any.isRequired
        }

        constructor() {
            super();
            this.state = {
                data: data
            }
        }

        getChildContext() {
            return this.setState({
                data: this.state.data
            })
        }

        render() {
            return (
                <Post
                    {...this.props}
                />
            )
        }
    }
    return NewComponent;
}

请教一下为什么一直超时呢？Time Limit Exceeded

破军

@贾维尔麦基应该是getChildContext的问题，这里面是要返回一个{data:this.state.data}，你这边怎么又setState一次。。。

lzxxx

const makeProvider = function(obj){
  return function(Post){
    return class Post2 extends Component {
      static childContextTypes = {
        data: PropTypes.object
      }
      
      getChildContext (){
        return {data: obj}
      }
      
      render (){
        return (
            <Post />
          )
      }
    }
  }
}

fengzi2016

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

cod我

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
}

lishu

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

Helianthuswhite

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

string10010

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

Sinosaurus

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}/>
  }
}

happyjacket

主要是理解高阶组件其实就是包裹了一个组件的组件，然后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;
  }
}

玄霄

const makeProvider = data => WrapperComponent => {
  return class NewComponent extends Component {
    static childContextTypes = {
      data: PropTypes.object.isRequired,
    }

    getChildContext() {
      return {
        data,
      }
    }

    render() {
      return (
        <div>
          <WrapperComponent />
        </div>
      )
    }
  }
}

流沙

<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>

Black-Hole

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

  render () {
    return <Comp {...this.props}/>
  }
}

ThackeryDKW

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