Reactは一般的なスケルトン画面コンポーネントの例を実装します

スケルトンスクリーンとは何ですか？

この場所を発見した同志たちは、スケルトンスクリーンについて多かれ少なかれ知識を持っています。まずは一言言わせてください。スケルトンスクリーンは、ユーザーの弱いネットワークエクスペリエンスを最適化し、待機中のユーザーの不安を効果的に軽減するソリューションです。

デモ

まずはデモを見て、最終製品の概要と使い方をざっと把握してみましょう。

npm で obiusm-react-components をインストールします

'obiusm-react-components' から { Skeleton } をインポートします。

  <スケルトン isVisible={true}>
    <div className="ラッパー">
      <div className="content1"></div>
      <div データスケルトン無視 = {true}> 123456</div>
      <div className="content2"></div>
      <div className="content3" データスケルトンスタイル={{ width: '50%' }}></div>
    </div>
  </スケルトン>

記述したコンポーネントの周りにレイヤーをラップするだけで、表示されるかどうかが決まります。

デザインのアイデア

スケルトンにより、ユーザーは実際のコンテンツが読み込まれる前にそれを認識できるため、ユーザーエクスペリエンスが向上します。作成するコンポーネントごとにスケルトンをカスタマイズする必要がある場合、非常に面倒になります。

React props のデータ転送方法のおかげで、props 内の ReactElement ツリー全体を簡単に取得できます。次に、ツリーを再帰的に走査してその構造を模倣し、そのクラスをコピーしてスケルトンを自動的に生成するだけです。

しかし、実際の使用では、ツリー全体の構造をシミュレートせずに、最初の数層の構造のみが必要になる場合があります。また、自動的に生成されたスタイルが醜すぎるため、ノードスタイルをカスタマイズする必要がある可能性もあります。また、一部のフローティングレイヤーコンテンツに注意を払う必要がない場合や、特定のノードを無視したい場合もあります。

したがって、おそらく次の機能を実装する必要があるでしょう

再帰の深さの設定
ノードを無視する方法を提供する
スケルトンノードのスタイルをカスタマイズするためのメソッドを提供します

具体的な実装

まず、スケルトン画面をレンダリングするか、実際の要素をレンダリングするかを決定するコンポーネント関数を定義します。

関数 Skeleton(props: Props) {
  もし (!props) {
    <div /> を返します。
  }
  （props.isVisible）の場合{
    createModal(props.children, props.depth || 4, 0) を返します。
  } それ以外 {
    props.children を返します。props.children: <div />;
  }
}

createModal は、Skeleton の下にラップされた div を再帰的にトラバースします。再帰するたびに、current に 1 を追加して下に渡します。このようにして、再帰のレイヤーがいくつ作成されたか、各ノードの data-skeleton-ignore に data-skeleton-style があるかどうかを判断し、特別に処理することができます。

const createModal = (子: ReactElement、深さ: 数値、現在: 数値) => {
  もし （
    深さ === 現在の ||
    (子 && child.props && child.props['data-skeleton-ignore'])
  ）{
    戻る;
  }
  もし （
    子供 ＆＆
    子.props &&
    子.props.children &&
    Array.isArray(child.props.children) &&
    現在の深さ < 1
  ）{
    戻る （
      <div
        クラス名={`${
          child.props.className !== 未定義 ? child.props.className : ''
        } ${'react-skeleton'}`}
        スタイル={
          child.props && child.props['データスケルトンスタイル']
            ? child.props['データスケルトンスタイル']
            : {}
        }
        キー={Math.random() * 1000}
      >
        {child.props.children && child.props.children.length > 0
          ? child.props.children.map((child: any) => {
              createModal(child, depth, current + 1) を返します。
            })
          : '*'}
      </div>
    );
  } それ以外 {
    戻る （
      <div
        クラス名={`${
          child.props && child.props.className ? child.props.className : ''
        } ${'react-skeleton2'}`}
        スタイル={
          child.props && child.props['データスケルトンスタイル']
            ? child.props['データスケルトンスタイル']
            : {}
        }
        キー={Math.random() * 1000}
      >
        *
      </div>
    );
  }
};

完全なコードと使用方法のドキュメント

完全なコード obiusm-react-components

ドキュメント https://magic-zhu.github.io/obiusm-react-components-docs/components/skeleton/

これで、React を使用した一般的なスケルトンスクリーンコンポーネントの例の実装に関するこの記事は終了です。React スケルトンスクリーンに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: