cnpm install antd --save
增强组建功能
一：非侵入式
import React from 'react';
import {Icon} from 'antd';
export default (WrapComponent)=>{
return class extends React.Component{
constructor(props){
super(props)
}
render(){
renturn <div>
<a href="www.baidu.com">
下载知乎app
<Icon type="zhihu"/>
</a>
<WrapComponent/>
</div>
}
}
}
在其他组件里，我们引用这个高阶组件
import MountApp from '../../highOrder/mountApp.jsx';
class Hot extends React.Component{
constructor(props){
super(props)
this.state={
isloade:true
}
}
componentDidMount(){
}
render(){
return <div>
hot
</div>
}
}
export default MountApp(Hot)
二：侵入式组件
import React from 'react';
import {Spin} from 'antd';
import 'antd/lib/spin/style/css';
export default (WrapComponent)=>{
return class extends WrapComponent{
constructor(props){
super(props)
}
componentDidMount(){
super.componentDidMount()
}
render(){
if(this.state.loading){
return <Spin>{
super.render()
}</Spin>
}else{
return super.render()
}
}
}
}
在其他组件里，我们引用这个高阶组件
import MountLoading from '../../highOrder/mountLoading.jsx';
class Attention extends React.Component{
constructor(){
super()
this.state={
list:[],
loading:true
}
}
componentDidMount(){
this.setState({
list,
loading:false
})
}
export default MountLoading(Attention)
