React implementiert ein allgemeines Beispiel für eine Skelett-Bildschirmkomponente

Was ist ein Skelettsieb?

Die Kameraden, die diesen Ort gefunden haben, haben mehr oder weniger Wissen über Skelettschirme. Erlauben Sie mir bitte, zuerst ein paar Worte zu sagen. Skeleton Screen ist eine Lösung zur Optimierung des schwachen Netzwerkerlebnisses der Benutzer und kann deren Angst während des Wartens wirksam lindern.

Demo

Schauen wir uns zunächst eine Demo an, um eine ungefähre Vorstellung vom Endprodukt und seiner Verwendung zu bekommen.

npm installiere obiusm-react-components

importiere { Skeleton } von 'obiusm-react-components';

  <Skelett isVisible={true}>
    <div Klassenname="Wrapper">
      <div Klassenname = "Inhalt1"></div>
      <div data-skeleton-ignore={true}>123456</div>
      <div Klassenname = "Inhalt2"></div>
      <div className="content3" data-skeleton-style={{ width: '50%' }}></div>
    </div>
  </Skelett>

Legen Sie einfach eine Ebene um die von Ihnen geschriebene Komponente, um zu entscheiden, ob sie angezeigt wird.

Gestaltungsideen

Das Skelett ermöglicht es Benutzern, den tatsächlichen Inhalt wahrzunehmen, bevor er geladen wird, was die Benutzererfahrung verbessern kann. Wenn wir das Skelett für jede Komponente, die wir schreiben, anpassen müssen, wird das ziemlich umständlich.

Dank der Datenübertragungsmethode von React-Props können wir problemlos den gesamten ReactElement-Baum in Props abrufen. Dann müssen wir nur noch den Baum rekursiv durchlaufen, um seine Struktur nachzuahmen und seine Klasse zu kopieren, um das Skelett automatisch zu generieren.

Aber im tatsächlichen Gebrauch benötigen wir möglicherweise nur die Struktur der ersten paar Schichten, ohne die Struktur des gesamten Baums zu simulieren. Es ist auch möglich, dass der automatisch generierte Stil zu hässlich ist und wir seinen Knotenstil anpassen müssen. Es ist auch möglich, dass wir auf einige schwebende Schichtinhalte nicht achten müssen oder einen bestimmten Knoten ignorieren möchten.

Daher müssen wir wahrscheinlich die folgenden Funktionen implementieren

• Einstellen der Rekursionstiefe
• Bietet eine Methode zum Ignorieren von Knoten
• Bietet Methoden zum Anpassen von Skelettknotenstilen

Konkrete Umsetzung

Definieren Sie zunächst eine Komponentenfunktion, um zu entscheiden, ob der Skelettbildschirm oder das reale Element gerendert werden soll

Funktion Skelett(Requisiten: Requisiten) {
  wenn (!props) {
    gibt <div /> zurück;
  }
  wenn (Eigenschaften.istSichtbar) {
    gibt createModal zurück (Eigenschaften.Kinder, Eigenschaften.Tiefe || 4, 0);
  } anders {
    gibt Requisiten.Kinder zurück? Requisiten.Kinder: <div />;
  }
}

createModal durchläuft rekursiv das unter dem Skeleton gepackte div. Bei jeder Rekursion wird current zu 1 addiert und nach unten weitergegeben. Auf diese Weise können wir feststellen, wie viele Rekursionsebenen durchgeführt wurden und ob data-skeleton-ignore auf jedem Knoten data-skeleton-style hat, um es speziell zu behandeln.

const createModal = (Kind: ReactElement, Tiefe: Zahl, aktuell: Zahl) => {
  Wenn (
    Tiefe === aktuell ||
    (Kind && Kind.Eigenschaften && Kind.Eigenschaften['Datenskelett-Ignorieren'])
  ) {
    zurückkehren;
  }
  Wenn (
    Kind &&
    untergeordnete Eigenschaften &&
    Kind.Requisiten.Kinder &&
    Array.isArray(Kind.Eigenschaften.Kinder) &&
    Strom < Tiefe - 1
  ) {
    zurückkehren (
      <div
        Klassenname={`${
          child.props.className !== undefiniert ? child.props.className : ''
        } ${'react-skeleton'}`}
        Stil={
          untergeordnete Eigenschaften und untergeordnete Eigenschaften ['Datenskelett-Stil']
            ? child.props['Datenskelett-Stil']
            : {}
        }
        Schlüssel={Math.random() * 1000}
      >
        {child.props.children && child.props.children.length > 0
          ? child.props.children.map((child: any) => {
              returniere createModal(Kind, Tiefe, aktuell + 1);
            })
          : '*'}
      </div>
    );
  } anders {
    zurückkehren (
      <div
        Klassenname={`${
          untergeordnete Requisiten und untergeordnete Requisitenklassenname? untergeordnete Requisitenklassenname: ''
        } ${'react-skeleton2'}`}
        Stil={
          untergeordnete Eigenschaften und untergeordnete Eigenschaften ['Datenskelett-Stil']
            ? child.props['Datenskelett-Stil']
            : {}
        }
        Schlüssel={Math.random() * 1000}
      >
        *
      </div>
    );
  }
};

Vollständige Code- und Verwendungsdokumentation

Vollständiger Code von obiusm-react-components

Dokumentation https://magic-zhu.github.io/obiusm-react-components-docs/components/skeleton/

Dies ist das Ende dieses Artikels über die Implementierung eines allgemeinen Beispiels für eine Skeleton-Bildschirmkomponente mit React. Weitere relevante Inhalte zum Skeleton-Bildschirm von React finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!