Implementierungsschritte zur Kapselung von Komponenten basierend auf React

importiere * als React von „react“;
importiere Klassennamen aus „Klassennamen“;
importiere { ConfigConsumer, ConfigConsumerProps } von '../config-provider';

Exportschnittstelle DividerProps {
    PräfixCls?: Zeichenfolge;
    Typ?: „horizontal“ | „vertikal“;
    Ausrichtung?: ‚links‘ | ‚rechts‘ | ‚Mitte‘;
    Klassenname?: Zeichenfolge;
    Kinder?: React.ReactNode;
    gestrichelt?: Boolesch;
    Stil?: React.CSSProperties;
    einfach?: boolesch;
}

const Divider: React.FC<DividerProps> = props => (
    <Konfigurationsverbraucher>
        {({ getPrefixCls, Richtung }: ConfigConsumerProps) => {
            Konstante {
                PräfixCls: PräfixCls anpassen,
                Typ = "horizontal",
                Ausrichtung = "Mitte",
                Klassenname,
                Kinder,
                gestrichelt,
                schmucklos,
                …restProps
            } = Requisiten;
            const prefixCls = getPrefixCls('Teiler', customizePrefixCls);
            const orientationPrefix = Orientierung.Länge > 0? `-${orientation}`: Orientierung;
            const hatKinder = !!Kinder;
            const classString = Klassennamen(
                PräfixCls,
                `${prefixCls}-${type}`,
                {
                    [`${prefixCls}-mit-text`]: hatKinder,
                    [`${prefixCls}-mit-text${orientationPrefix}`]: hatKinder,
                    [`${prefixCls}-dashed`]: !!gestrichelt,
                    [`${prefixCls}-plain`]: !!plain,
                    [`${prefixCls}-rtl`]: Richtung === 'rtl',
                },
                Klassenname,
            );
            zurückkehren (
                <div className={classString} {...restProps} role="Trennzeichen">
                    {Kinder && <span className={`${prefixCls}-inner-text`}>{Kinder}</span>}
                </div>
            );
        }}
    </Konfigurationsverbraucher>
);

Standardteiler exportieren;

Schnittstelle DividerProps exportieren { // Schnittstelle hat TypeScript-Syntax PräfixCls?: Zeichenfolge;
    Typ?: ‚horizontal‘ | ‚vertikal‘; // Typ auf nur einen der beiden Werte beschränken Ausrichtung?: ‚links‘ | ‚rechts‘ | ‚Mitte‘;
    Klassenname?: Zeichenfolge;
    Kinder?: React.ReactNode;
    gestrichelt?: Boolesch;
    Stil?: React.CSSProperties;
    einfach?: boolesch;
}

<Konfigurationsverbraucher>
    {({ getPrefixCls, Richtung }: ConfigConsumerProps) => {
        Konstante {
            PräfixCls: PräfixCls anpassen,
            Typ = "horizontal",
            Ausrichtung = "Mitte",
            Klassenname,
            Kinder,
            gestrichelt,
            schmucklos,
            …restProps
        } = Requisiten;
        const prefixCls = getPrefixCls('Teiler', customizePrefixCls);

Schnittstelle ConfigConsumerProps exportieren {
  ...
  getPrefixCls: (suffixCls?: Zeichenfolge, customizePrefixCls?: Zeichenfolge) => Zeichenfolge;
  ...
}

const defaultGetPrefixCls = (suffixCls?: Zeichenfolge, customizePrefixCls?: Zeichenfolge) => {
  wenn (PrefixCls anpassen) returniere „PrefixCls anpassen“;

  SuffixCls zurückgeben? `ant-${suffixCls}`: 'ant';
};

importiere Klassennamen aus „Klassennamen“;

const classString = Klassennamen(
    PräfixCls,
    `${prefixCls}-${type}`,
    {
        [`${prefixCls}-mit-text`]: hatKinder,
        [`${prefixCls}-mit-text${orientationPrefix}`]: hatKinder,
        [`${prefixCls}-dashed`]: !!gestrichelt,
        [`${prefixCls}-plain`]: !!plain,
        [`${prefixCls}-rtl`]: Richtung === 'rtl',
    },
    Klassenname,
);
zurückkehren (
    <div className={classString} {...restProps} role="Trennzeichen">
        {Kinder && <span className={`${prefixCls}-inner-text`}>{Kinder}</span>}
    </div>
);

@import '../../Stil/Themen/Index';
@import '../../style/mixins/index';

@divider-prefix-cls: ~'@{ant-prefix}-divider'; // Sie können sehen, dass dies dem zuvor erwähnten Klassennamenpräfix entspricht.@{divider-prefix-cls} {
  .reset-Komponente();

  Rahmen oben: @border-width-base solid @divider-color;

  &-vertical { // Der vollständige Klassenname ist hier eigentlich ant-divider-vertical. Dies ist der Stil, der der Trennkomponente entspricht, wenn der Wert des Typattributs vertikal ist. Position: relative;
    oben: -0,06em;
    Anzeige: Inline-Block;
    Höhe: 0,9em;
    Rand: 0,8px;
    vertikale Ausrichtung: Mitte;
    Rahmen oben: 0;
    Rahmen links: @border-width-base solid @divider-color;
  }

  &-horizontal {
    Anzeige: Flex;
    klar: beides;
    Breite: 100 %;
    Mindestbreite: 100 %; 
    Rand: 24px 0;
  }

  &-horizontal&-mit-Text {
    Anzeige: Flex;
    Rand: 16px 0;
    Farbe: @Überschriftenfarbe;
    Schriftstärke: 500;
    Schriftgröße: @font-size-lg;
    Leerzeichen: Nowrap;
    Textausrichtung: zentriert;
    Rahmen oben: 0;
    Farbe des oberen Rahmens: @Teilerfarbe;

    &::vor,
    &::nach {
      Position: relativ;
      oben: 50 %;
      Breite: 50%;
      Rahmen oben: @border-width-base durchgehend transparent;
      // Chrome akzeptiert kein „inherit“ in „border-top“
      Rahmenoberseite-Farbe: erben;
      Rahmen unten: 0;
      transformieren: übersetzenY(50%);
      Inhalt: '';
    }
  }

  &-horizontal&-mit-Text-links {
    &::vor {
      oben: 50 %;
      Breite: @divider-orientation-margin;
    }

    &::nach {
      oben: 50 %;
      Breite: 100 % – @divider-orientation-margin;
    }
  }

  &-horizontal&-mit-Text-rechts {
    &::vor {
      oben: 50 %;
      Breite: 100 % – @divider-orientation-margin;
    }

    &::nach {
      oben: 50 %;
      Breite: @divider-orientation-margin;
    }
  }

  &-innerer-text {
    Anzeige: Inline-Block;
    Polsterung: 0 @divider-text-padding;
  }

  &-gestrichelt {
    Hintergrund: keiner;
    Rahmenfarbe: @Teilerfarbe;
    Rahmenstil: gestrichelt;
    Rahmenbreite: @border-width-base 0 0;
  }

  &-horizontal&-mit-Text&-gestrichelt {
    Rahmen oben: 0;

    &::vor,
    &::nach {
      Rahmenstil: gestrichelt, keine, keine;
    }
  }

  &-vertikal&-gestrichelt {
    Rahmenbreite: 0 0 0 @border-width-base;
  }

  &-plain&-mit-text {
    Farbe: @Textfarbe;
    Schriftstärke: normal;
    Schriftgröße: @font-size-base;
  }
}

@import './rtl';