#15 高阶组件 + context


  • 0
    administrators

    完成高阶组件 makeProvider,接受一个任意类型的数据和组件作为参数:

    Post = makeProvider({ name: 'Jerry' })(Post)
    

    Post 下的所有子组件都可以通过 this.context.data 获取到传给 makeProvider 的参数。如上面的 Post 及其子组件的内部可以通过 this.context.data.name 获取到 Jerry


  • 1

    const makeProvider = (data) => (Post) => {
      return class WrapComponent extends Component {
        static childContextTypes = {
          data: PropTypes.any.isRequired
        }
        
        getChildContext() {
          return {
            data: data
          }
        }
        
        constructor(props) {
          super(props)
        }
        
        render() {
          return (
            <Post />
          )
        }
      }
    }
    

  • 0

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

  • 0

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

  • 0

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

  • 0

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

  • 0

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

  • 0

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

  • 0

    const makeProvider = (data)=>{
      return(
        (Fn)=>{
          class Box extends Component{
            render(){
              return(
                <Fn/>
              )
            }
            getChildContext(){
          		return {
          			data
          		}
        	  }
          }
          Box.childContextTypes = {
          	data : PropTypes.object.isRequired
          }
          return Box;
        }
      )
    }
    

  • 0

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

  • 0

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

  • 0

    @ScriptOJ

    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


  • 0

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


  • 0

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

登录后回复
 

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