Reactベースのコンポーネントのカプセル化の実装手順

'react' から * を React としてインポートします。
'classnames' から classNames をインポートします。
'../config-provider' から ConfigConsumer、ConfigConsumerProps } をインポートします。

エクスポートインターフェースDividerProps {
    prefixCls?: 文字列;
    タイプ: '水平' | '垂直';
    方向?: '左' | '右' | '中央';
    クラス名?: 文字列;
    子?: React.ReactNode;
    破線?: ブール値;
    スタイル?: React.CSSProperties;
    プレーン?: ブール値;
}

定数ディバイダー: React.FC<DividerProps> = props => (
    <ConfigConsumer>
        {({ getPrefixCls, 方向 }: ConfigConsumerProps) => {
            定数{
                prefixCls: カスタマイズPrefixCls、
                タイプ = '水平'、
                方向 = '中心'、
                クラス名、
                子供たち、
                破線、
                無地、
                ...レストプロップ
            } = プロパティ;
            const prefixCls = getPrefixCls('divider', customizePrefixCls);
            const orientationPrefix = orientation.length > 0 ? `-${orientation}` : 方向;
            const hasChildren = !!children;
            定数classString = classNames(
                プレフィックスCls、
                `${prefixCls}-${type}`、
                {
                    [`${prefixCls}-with-text`]: 子を持つ、
                    [`${prefixCls}-with-text${orientationPrefix}`]: 子を持ちます、
                    [`${prefixCls}-dashed`]: !!dashed,
                    [`${prefixCls}-p​​lain`]: !!プレーン,
                    [`${prefixCls}-rtl`]: 方向 === 'rtl',
                },
                クラス名、
            );
            戻る （
                <div className={classString} {...restProps} 役割="セパレーター">
                    {子供 && <span className={`${prefixCls}-inner-text`}>{子供}</span>}
                </div>
            );
        }}
    </ConfigConsumer>
);

デフォルトのディバイダをエクスポートします。

export interface DividerProps { // インターフェースは TypeScript 構文です prefixCls?: string;
    type?: 'horizo​​ntal' | 'vertical'; // タイプを 2 つの値のうち 1 つのみに制限します orientation?: 'left' | 'right' | 'center';
    クラス名?: 文字列;
    子?: React.ReactNode;
    破線?: ブール値;
    スタイル?: React.CSSProperties;
    プレーン?: ブール値;
}

<ConfigConsumer>
    {({ getPrefixCls, 方向 }: ConfigConsumerProps) => {
        定数{
            prefixCls: カスタマイズPrefixCls、
            タイプ = '水平'、
            方向 = '中心'、
            クラス名、
            子供たち、
            破線、
            無地、
            ...レストプロップ
        } = プロパティ;
        const prefixCls = getPrefixCls('divider', customizePrefixCls);

エクスポートインターフェースConfigConsumerProps {
  ...
  getPrefixCls: (suffixCls?: 文字列、customizePrefixCls?: 文字列) => 文字列;
  ...
}

const defaultGetPrefixCls = (suffixCls?: 文字列、customizePrefixCls?: 文字列) => {
  if (customizePrefixCls) は customizePrefixCls を返します。

  suffixCls を返します ? `ant-${suffixCls}` : 'ant';
};

'classnames' から classNames をインポートします。

const クラス文字列 = クラス名(
    プレフィックスCls、
    `${prefixCls}-${type}`、
    {
        [`${prefixCls}-with-text`]: 子を持つ、
        [`${prefixCls}-with-text${orientationPrefix}`]: 子を持ちます、
        [`${prefixCls}-dashed`]: !!dashed,
        [`${prefixCls}-p​​lain`]: !!プレーン,
        [`${prefixCls}-rtl`]: 方向 === 'rtl',
    },
    クラス名、
);
戻る （
    <div className={classString} {...restProps} 役割="セパレーター">
        {子供 && <span className={`${prefixCls}-inner-text`}>{子供}</span>}
    </div>
);

@import '../../style/themes/index';
@import '../../style/mixins/index';

@divider-prefix-cls: ~'@{ant-prefix}-divider'; // これは、前述のクラス名プレフィックスに対応していることがわかります。@{divider-prefix-cls} {
  .reset-component();

  上境界線: @border-width-base solid @divider-color;

  &-vertical { // ここでの完全なクラス名は実際には ant-divider-vertical であり、これは type 属性値が vertical position: relative の場合の区切りコンポーネントに対応するスタイルです。
    上: -0.06em;
    表示: インラインブロック;
    高さ: 0.9em;
    マージン: 0 8px;
    垂直位置合わせ: 中央;
    上境界線: 0;
    左境界線: @border-width-base solid @divider-color;
  }

  &-水平{
    ディスプレイ: フレックス;
    クリア: 両方;
    幅: 100%;
    最小幅: 100%; 
    マージン: 24px 0;
  }

  &-水平&-テキスト付き{
    ディスプレイ: フレックス;
    マージン: 16px 0;
    色: @heading-color;
    フォントの太さ: 500;
    フォントサイズ: @font-size-lg;
    空白: ラップなし;
    テキスト配置: 中央;
    上境界線: 0;
    境界線の上部の色: @divider-color;

    ＆：：前に、
    ＆：：後 {
      位置: 相対的;
      上位: 50%;
      幅: 50%;
      border-top: @border-width-base solid transparent;
      // Chrome は `border-top` 内の `inherit` を受け入れません
      境界線上部の色: 継承;
      下境界線: 0;
      変換: translateY(50%);
      コンテンツ： '';
    }
  }

  &-horizo​​ntal&-with-text-left {
    ＆：：前に {
      上位: 50%;
      幅: @divider-orientation-margin;
    }

    ＆：：後 {
      上位: 50%;
      幅: 100% - @divider-orientation-margin;
    }
  }

  &-horizo​​ntal&-with-text-right {
    ＆：：前に {
      上位: 50%;
      幅: 100% - @divider-orientation-margin;
    }

    ＆：：後 {
      上位: 50%;
      幅: @divider-orientation-margin;
    }
  }

  &-内部テキスト{
    表示: インラインブロック;
    パディング: 0 @divider-text-padding;
  }

  &-破線 {
    背景: なし;
    境界線の色: @divider-color;
    境界線スタイル: 破線;
    境界線の幅: @border-width-base 0 0;
  }

  &-水平&-テキスト付き&-破線 {
    上境界線: 0;

    ＆：：前に、
    ＆：：後 {
      境界線スタイル: 破線 なし なし;
    }
  }

  &-垂直&-破線 {
    境界線の幅: 0 0 0 @境界線の幅のベース;
  }

  &プレーン&テキスト付き{
    色: @テキストカラー;
    フォントの太さ: 標準;
    フォントサイズ: @font-size-base;
  }
}

@import './rtl';