zoukankan      html  css  js  c++  java
  • react高阶组件

    先简单介绍一下高阶组件

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

    作用:

    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)

      

  • 相关阅读:
    XSS初探
    简单的HTTP服务实现
    WinForm“假死”问题汇总
    Access 数据库的数据类型
    C#应用调试C++ dll的方法
    Visual Studio远程调试
    【汇总】C#编程技巧
    SQL Server常见问题及解决方法
    java订单生成工具类
    JAVA-学习路线
  • 原文地址:https://www.cnblogs.com/ray123/p/10918643.html
Copyright © 2011-2022 走看看