溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關基于React封裝組件的實現步驟是怎樣的，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。
很多小伙伴在第一次嘗試封裝組件時會和我一樣碰到許多問題，比如人家的組件會有 color 屬性，我們在使用組件時傳入組件文檔中說明的屬性值如 primary ，那么這個組件的字體顏色會變為 primary 對應的顏色，這是如何做到的？還有別人封裝的組件類名都有自己獨特的前綴，這是如何處理的呢，難道是 css 類名全部加上前綴嗎，這也太麻煩了！
如果你正在困惑這些問題，你可以看看這篇文章。
我會參照 antd的divider組件 來講述如何基于React封裝一個組件，以及解答上述的一些問題，請耐心看完！
倉庫地址
antd 倉庫地址：https://github.com/ant-design/ant-design
divider 組件在下圖對應目錄下 (代碼我會拷貝過來，感興趣的還是可以去克隆一下倉庫)
antd 的源碼使用了 TypeScript 語法，因此不了解語法的同學要及時了解哦！
import * as React from 'react';
import classNames from 'classnames';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
export interface DividerProps {
prefixCls?: string;
type?: 'horizontal' | 'vertical';
orientation?: 'left' | 'right' | 'center';
className?: string;
children?: React.ReactNode;
dashed?: boolean;
style?: React.CSSProperties;
plain?: boolean;
}
const Divider: React.FC<DividerProps> = props => (
<ConfigConsumer>
{({ getPrefixCls, direction }: ConfigConsumerProps) => {
const {
prefixCls: customizePrefixCls,
type = 'horizontal',
orientation = 'center',
className,
children,
dashed,
plain,
...restProps
} = props;
const prefixCls = getPrefixCls('divider', customizePrefixCls);
const orientationPrefix = orientation.length > 0 ? `-${orientation}` : orientation;
const hasChildren = !!children;
const classString = classNames(
prefixCls,
`${prefixCls}-${type}`,
{
[`${prefixCls}-with-text`]: hasChildren,
[`${prefixCls}-with-text${orientationPrefix}`]: hasChildren,
[`${prefixCls}-dashed`]: !!dashed,
[`${prefixCls}-plain`]: !!plain,
[`${prefixCls}-rtl`]: direction === 'rtl',
},
className,
);
return (
<div className={classString} {...restProps} role="separator">
{children && <span className={`${prefixCls}-inner-text`}>{children}</span>}
</div>
);
}}
</ConfigConsumer>
);
export default Divider;在源碼中，最先看到的是以下內容，這些屬性也就是divider組件所暴露的屬性，我們可以 <Divider type='vertical' /> 這樣來傳入 type 屬性，那么 divider 分割線樣式就會渲染為垂直分割線，是不是很熟悉！
export interface DividerProps { // interface 是 TypeScript 的語法
prefixCls?: string;
type?: 'horizontal' | 'vertical'; // 限定 type 只能傳入兩個值中的一個
orientation?: 'left' | 'right' | 'center';
className?: string;
children?: React.ReactNode;
dashed?: boolean;
style?: React.CSSProperties;
plain?: boolean;
}在上面的屬性中，我們還發現 className 和 style是比較常見的屬性，這代表我們可以 <Divider type='vertical' className='myClassName' style={{width: '1em'}} /> 這樣使用這些屬性。
我們知道，antd 的組件類名會有他們獨特的前綴 ant-，這是如何處理的呢？繼續看源碼。
<ConfigConsumer>
{({ getPrefixCls, direction }: ConfigConsumerProps) => {
const {
prefixCls: customizePrefixCls,
type = 'horizontal',
orientation = 'center',
className,
children,
dashed,
plain,
...restProps
} = props;
const prefixCls = getPrefixCls('divider', customizePrefixCls);從源碼中，我們發現 prefixCls ，這里是通過 getPrefixCls 方法生成，再看看 getPrefixCls 方法的源碼，如下。
export interface ConfigConsumerProps {
...
getPrefixCls: (suffixCls?: string, customizePrefixCls?: string) => string;
...
}
const defaultGetPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => {
if (customizePrefixCls) return customizePrefixCls;
return suffixCls ? `ant-${suffixCls}` : 'ant';
};不難發現此時會生成的類名前綴為 ant-divider 。
我們封裝的組件肯定是有預設的樣式，又因為樣式要通過類名來定義，而我們傳入的屬性值則會決定組件上要添加哪個類名，這又是如何實現的呢？下面看源碼。
import classNames from 'classnames';
const classString = classNames(
prefixCls,
`${prefixCls}-${type}`,
{
[`${prefixCls}-with-text`]: hasChildren,
[`${prefixCls}-with-text${orientationPrefix}`]: hasChildren,
[`${prefixCls}-dashed`]: !!dashed,
[`${prefixCls}-plain`]: !!plain,
[`${prefixCls}-rtl`]: direction === 'rtl',
},
className,
);
return (
<div className={classString} {...restProps} role="separator">
{children && <span className={`${prefixCls}-inner-text`}>{children}</span>}
</div>
);我們發現，它通過 classNames 方法（classNames是React處理多類名的組件）定義了一個所有類名的常量，然后傳給了 div 中的 className 屬性。
其實生成的類名也就是 ant-divider-horizontal 這個樣子，那么css中以此類名定義的樣式也就自然會生效了。而 className 和 style 屬性則是通過 {...restProps} 來傳入。
最后我們再看看它的css樣式代碼是怎么寫的！
antd 組件的樣式使用 Less 書寫，不了解 Less 語法的同學一定要了解一下。
@import '../../style/themes/index';
@import '../../style/mixins/index';
@divider-prefix-cls: ~'@{ant-prefix}-divider'; // 可以看到這里對應的也就是之前說到的類名前綴
.@{divider-prefix-cls} {
.reset-component();
border-top: @border-width-base solid @divider-color;
&-vertical { // 這里的完整類名其實就是 ant-divider-vertical, 也就是 divider 組件的 type 屬性值為 vertical 時對應的樣式
position: relative;
top: -0.06em;
display: inline-block;
height: 0.9em;
margin: 0 8px;
vertical-align: middle;
border-top: 0;
border-left: @border-width-base solid @divider-color;
}
&-horizontal {
display: flex;
clear: both;
width: 100%;
min-width: 100%;
margin: 24px 0;
}
&-horizontal&-with-text {
display: flex;
margin: 16px 0;
color: @heading-color;
font-weight: 500;
font-size: @font-size-lg;
white-space: nowrap;
text-align: center;
border-top: 0;
border-top-color: @divider-color;
&::before,
&::after {
position: relative;
top: 50%;
width: 50%;
border-top: @border-width-base solid transparent;
// Chrome not accept `inherit` in `border-top`
border-top-color: inherit;
border-bottom: 0;
transform: translateY(50%);
content: '';
}
}
&-horizontal&-with-text-left {
&::before {
top: 50%;
width: @divider-orientation-margin;
}
&::after {
top: 50%;
width: 100% - @divider-orientation-margin;
}
}
&-horizontal&-with-text-right {
&::before {
top: 50%;
width: 100% - @divider-orientation-margin;
}
&::after {
top: 50%;
width: @divider-orientation-margin;
}
}
&-inner-text {
display: inline-block;
padding: 0 @divider-text-padding;
}
&-dashed {
background: none;
border-color: @divider-color;
border-style: dashed;
border-width: @border-width-base 0 0;
}
&-horizontal&-with-text&-dashed {
border-top: 0;
&::before,
&::after {
border-style: dashed none none;
}
}
&-vertical&-dashed {
border-width: 0 0 0 @border-width-base;
}
&-plain&-with-text {
color: @text-color;
font-weight: normal;
font-size: @font-size-base;
}
}
@import './rtl';這樣一來，我相信同學們也大概了解如何去封裝一個組件以及關鍵點了，在源碼中還有很多地方值得我們學習，比如這里的 ConfigConsumer 的定義與使用。
關于基于React封裝組件的實現步驟是怎樣的就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
