如何为ReactJS应用程序创建动态骨架加载组件

Question

我正在尝试使用像下面这样的反应加载骨架包

import React from 'react';
import Skeleton from 'react-loading-skeleton';

function SkeletonComponent() {
  return (
    <div
      style={{
        display: 'inline-block',
        width: '300px',
        height: '180px',
        borderRadius: '8px',
        background: 'antiquewhite',
        textAlign: 'center',
        margin: '8px',
      }}
    >
      <Skeleton height={30} width={20} circle={true} />
      <h2>
        <Skeleton type='circle' />
      </h2>
      <h3>
        <Skeleton />
      </h3>
      <h4>
        <Skeleton />
      </h4>
    </div>
  );
}

export default SkeletonComponent;

那么我应该如何为整个页面使用骨架组件而不是每个HTML元素

Answer 1

欢迎来到斯塔克沃夫。你在这里犯了什么错误？请遵循这个示例，从这里开始，我已经实现了一次https://codesandbox.io/s/3xwil?file=/src/App.tsx:498-506

Answer 2

在反应载荷-骨架页面中

function BlogPost(props) {
    return (
        <div>
            <h1>{props.title || <Skeleton />}</h1>
            {props.body || <Skeleton count={10} />}
        </div>
    )
}

尝尝这个