react高阶组件

最新推荐文章于 2025-07-04 10:48:17 发布

转载最新推荐文章于 2025-07-04 10:48:17 发布 · 59 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ray123/p/10918643.html

博客简单介绍了高阶组件，它是一个以组件为参数的函数，经其处理后的组件会得到增强。还阐述了高阶组件的作用，包括属性代理和渲染劫持。

先简单介绍一下高阶组件

高阶组件其实就是一个函数，参数是一个组件，经过高阶组件处理过的组件，会变成一个相对增强的组件

作用：

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)