标签：color demo border 6px background Blackboard 组件 高阶

高级组件 higherOrderComponent （HOC）

　　是个纯函数，接收一个组件，返回一个组件

例子： 效果图 js部份

import React, { Component } from "react";
import "./Blackboard.less";

const defaultParams = {

}

export const Blackboard = (params = defaultParams) => (WrappedComponent) => {
  return class HOC extends Component {
    render() {
      return (
        <div className="Blackboard">
          <section className="code-box-demo">
            <WrappedComponent {...this.props} {...params}/>
          </section>
          <section className="code-box-meta markdown">
            <div className="code-box-title">
              <span>高阶组件用法举例</span>
            </div>
          </section>
        </div>
      )
    }
  }
}

less部份

.Blackboard{
  border: 1px solid #e9e9e9;
  border-radius: 6px;
  display: inline-block;
  width: 100%;
  position: relative;
  margin: 0 0 16px;
  transition: all .2s ease;
  &:hover {
    box-shadow: 0 0 6px rgba(0,0,0,.15);
    position: relative;
    z-index: 10;
    // background: #fff;
  }
  .code-box-demo{
    width: 100%;
    border-bottom: 1px solid #e9e9e9;
    padding: 42px 20px 50px;
  }
  .code-box-meta.markdown {
    position: relative;
    padding: 17px 16px 15px 20px;
    border-radius: 0 0 6px 6px;
    -webkit-transition: background-color .4s ease;
    transition: background-color .4s ease;
    width: 100%;
    font-size: 12px;
  }
  .markdown {
    color: #666;
    line-height: 1.8;
  }
  .code-box-title{
    position: absolute;
    top: -13px;
    padding: 1px 8px;
    margin-left: -8px;
    color: #777;
    border-radius: 6px;
    border-top-left-radius: 0;
    background: #fff;
    -webkit-transition: background-color .4s ease;
    transition: background-color .4s ease;
  }
}

使用方式

import React from "react";
import { Blackboard } from "components/Blackboard/Blackboard"; // 引入高阶组件

class YearPicker extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      // ...
    };
  }

  render() {
    return (
      <div>
         // ...
      </div>
    )
  }
}

// 组件导出之前包裹一下
export default Blackboard({})(YearPicker)

 

 

 

 

 

 

标签：color,demo,border,6px,background,Blackboard,组件,高阶
来源： https://www.cnblogs.com/MrZhujl/p/13861554.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。