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

2020-04-21  本文已影响0人  _luchao

定义一个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
上一篇 下一篇

猜你喜欢

热点阅读