先简单介绍一下高阶组件
高阶组件其实就是一个函数,参数是一个组件,经过高阶组件处理过的组件,会变成一个相对增强的组件
作用:
1、属性代理
headerHoc.js import React from "react" export const headerHoc=(Com)=>(props)=>{ return class extends React.Component { render (){ return ( <div className="header" style={{position:props.'fixed':"",background:props.bgColor}}> <p><</p> <Com>{{props.title}}</Com> </div> ) } } } header.js import React from "react" import {headerHoc} from "./headerHoc"; class Header extends React.Componhent{ render(){ return( <div>{this.props.children}</div> ) } } let props={ title:"首页", bgColor:“yellow”, fixed :true } export default headerHoc(Header)(props)
2、渲染劫持
renderContext.js import React from "react" export const renderHoc =(Com)=>(score)=>{ return class extends React.Component{ render(){ return ( <div>
{score>10?<Com/>:<h2>请充值</h2>}
<div>
)
}
}
}
contxt.js
import React from "react"
import {renderHoc} from "./renderContext";
class ContextCom extends React.Component{
render(){
return(
<div>VIP会员</div>
)
}
}
export default renderHoc(ContextCom)(9)