基於React封裝組件的實現步驟

Posted on 2021-11-28 by WalkonNet

前言

很多小夥伴在第一次嘗試封裝組件時會和我一樣碰到許多問題，比如人傢的組件會有 color 屬性，我們在使用組件時傳入組件文檔中說明的屬性值如 primary ，那麼這個組件的字體顏色會變為 primary 對應的顏色，這是如何做到的？還有別人封裝的組件類名都有自己獨特的前綴，這是如何處理的呢，難道是 css 類名全部加上前綴嗎，這也太麻煩瞭！

如果你正在困惑這些問題，你可以看看這篇文章。

我會參照 antd的divider組件來講述如何基於React封裝一個組件，以及解答上述的一些問題，請耐心看完！

antd 是如何封裝組件的

倉庫地址

antd 倉庫地址：https://github.com/ant-design/ant-design
divider 組件在下圖對應目錄下 (代碼我會拷貝過來，感興趣的還是可以去克隆一下倉庫)

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樣式代碼是怎麼寫的！

divider 組件樣式源代碼

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封裝組件的實現步驟的文章就介紹到這瞭,更多相關React 封裝組件內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

基於React封裝組件的實現步驟

目錄

前言

antd 是如何封裝組件的

divider 組件源代碼

如何暴露組件屬性

如何設置統一類名前綴

如何處理樣式與類名

divider 組件樣式源代碼

推薦閱讀：

發佈留言取消回覆

近期文章

目錄

前言

antd 是如何封裝組件的

divider 組件源代碼

如何暴露組件屬性

如何設置統一類名前綴

如何處理樣式與類名

divider 組件樣式源代碼

推薦閱讀：

發佈留言 取消回覆

近期文章

標籤

發佈留言取消回覆