react中装饰器的应用(反向继承)

定义一个loading组件
在app组件加上 @loading 装饰器
app组件 就继承了 loading 组件的方法

import React,{Component} from 'react';
import ReactDOM from 'react-dom'
let loading = (Com)=>{
  class LoadingComponent extends Com {
      constructor(props){
        super(props);
        this.state={
            loading : false
        }
    }
    render(){
        const { loading } = this.state;
        return(
            <div>
                {loading ? 'loading...' :''}
            </div>
        )
    }
    showLoading(){
        this.setState({
            loading:true
        })
    }
    hideLoading(){
        this.setState({
            loading:false
        })
    }
  }
  return LoadingComponent
}

@loading
class App extends React.Component{
 constructor(props){
    super(props);
    this.state={
      data:[],
      loading:false
    }
 }
 componentDidMount(){
  this.showLoading()

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

export default App
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Python 是一门极简的语言,语言简洁学习起来也是相当轻松的,但是依然有一些高级技巧,例如装饰器、协程、并发,会...
    妄心xyx阅读 1,651评论 0 23
  • 夜乘归车稀疏客 眺眼数来千盏灯 远见黯处站一人 凉风不散人不归
    小猫的尾巴阅读 108评论 0 1
  • 是否情字写来都空洞 一笔一划斟酌着奉送 甘愿卑微换个笑容 或沦为平庸
    King_哒哒阅读 193评论 0 1
  • 早晨我起来的时候一看金灿灿的阳光,照满了大地,我感觉,回到了春天,天气慢慢的变暖和了,春风微微的吹着,把大地吹醒了...
    ab83fae9c02b阅读 184评论 0 0
  • 当人们面对一个系统性的问题时,有很多失败的例子。比如大家熟知的除四害“老鼠、麻雀、苍蝇、蚊子”,尽管全民上阵,科技...
    原野行者阅读 214评论 0 0