react 封裝自定義元件之Button元件

學習react當然必不可少的就是自定義元件啦！

看一下效果圖

首先看一下專案結構

（劃去部分不需要）

base資料夾

這部分模仿we-ui結構

we-ui原始碼 原始碼

index.js

import react from 'react'

;import reactdom from 'react-dom';;
reactdom.
render
(>
, document.
getelementbyid
('root'))
;

import react,

from 'react'
;import from './button';}
render()
>disabled<
/button>
/h3>
>圓<
/button>
>c<
/button>
/h3>
"icon-search"
>icon<
/button>
"icon-search" circle=
>
<
/button>
function
<
/h3>
}>primary<
/button>
<
/div>
<
/div>);
}}

@import "./theme/pc.less"

; //匯入公共樣式和元件樣式
@import "./variable/button.less"
;

@bg-0: #fff;

@bf-1: #c0c4cc;
@primary: #409eff;
@success: #67c23a;
@danger: #f65c6c;
@warning: #e6a23c;
@info: #909399;
@fontsize: 14px;
@radius: 4px;

@btnborderradius: 4px;

@btnborder: 1px solid transparent;
@btnmargin: 0 8px 12px 0
;@btnfontsize: 14px;
@btnlargefontsize: 16px;
@btnsmallfontsize: 12px;
@btnpadding: 4px 15px;
@btnlargepadding: 6.4px 15px;
@btnsmallpadding: 1px 7px;
@b***isabledcol: #909399;

import button from './button'

export

import react,  from "react"

;import proptypes from "prop-types"
;import classnames from "classnames"
;import
"./styles/button.less"
;class button extends component ;}
handleclick =()
=>
;render()
`]: true,
[`btn_$
`]: true,
"btn_disabled"
: this.props.disabled,
"btn_circle"
: this.props.circle,
});return
(=onclick
=>
`} />
): null}
);}}
button.defaultprops =
;button.proptypes =
;export default button;

.btn_circle

@import "../../base/base.less"

;.btn_disabled 
}

.btn_icon

@import "../../base/base.less"

;.btn 
&_default 
&_small 
}

@import "../../base/base.less"

;.btn 
}&_success 
}&_danger 
}&_warning 
}&_info 
}}

@import "../../base/base.less"

;.btn 
@import "btn_type.less"
;@import "btn_size.less"
;@import "btn_disabled.less"
;@import "btn_circle.less"
;@import "btn_icon.less"
;

自定義React元件

如果還沒有專案，請看建立umi專案 訪問http localhost 8000實際由src pages index.js渲染，內容為 export default function 使用antd新增乙個輸入框和乙個按鈕 import from antd export default function...

react 自定義日曆元件

基於hooks開發的自定義日曆元件，可以根據自己需要修改 params searchbar 搜尋引數 列表資料 description 修改請備註 location grey const main props 獲取當前年份 const getfullyear date date number con...

自定義封裝 banner 元件

1.效果圖預覽 2.基本功能 乙個簡單方便的輪播圖元件，基於viewpager 基礎上進行的封裝。可設定 專案中，網路，view 可設定蒙層 可設定 是否允許滑動 可設定 是否允許迴圈。3.基本實現1.自定義屬性 2.基本方法 新增本地路徑 public void setviewres listvi...