先简单介绍一下高阶组件
高阶组件其实就是一个函数，参数是一个组件，经过高阶组件处理过的组件，会变成一个相对增强的组件
作用：
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.jsimport React from "react"import {renderHoc} from "./renderContext";class ContextCom extends React.Component{ render(){ return( <div>VIP会员</div> ) } }export default renderHoc(ContextCom)(9)
转载于:https://www.cnblogs.com/ray123/p/10918643.html
相关资源：react高阶组件经典应用之权限控制详解