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>
  </スケルトン>

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

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>
    );
  }
};