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>);
}}

src/base/base.less

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

src/base/theme/pc.less

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

src/base/variable/button.less

@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;

src/button/index.js

import button from './button'
export

src/button/button.jsx

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;

下面這些檔案是每個type的button的樣式src/button/styles/btn_circle.less

.btn_circle

src/button/styles/btn_disabled.less

@import "../../base/base.less"
;.btn_disabled 
}

src/button/styles/btn_icon.less

.btn_icon

src/button/styles/btn_size.less

@import "../../base/base.less"
;.btn 
&_default 
&_small 
}

src/button/styles/btn_type.less

@import "../../base/base.less"
;.btn 
}&_success 
}&_danger 
}&_warning 
}&_info 
}}

src/button/styles/button.less

@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...

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

自定義React元件

react 自定義日曆元件

自定義封裝 banner 元件

相關推薦