美文网首页
react中装饰器的应用(反向继承)

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

作者: _luchao | 来源:发表于2020-04-21 17:00 被阅读0次

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

相关文章

网友评论

      本文标题:react中装饰器的应用(反向继承)

      本文链接:https://www.haomeiwen.com/subject/fhkpihtx.html