当前位置：首页 > React

骨架屏实现react

2026-01-27 00:32:23React

骨架屏实现方法（React）

使用第三方库react-loading-skeleton 安装依赖包：

npm install react-loading-skeleton

基本使用方式：

import Skeleton from 'react-loading-skeleton'
import 'react-loading-skeleton/dist/skeleton.css'

function MyComponent() {
  return (
    <div>
      <Skeleton height={100} width={200} />
      <Skeleton count={3} />
    </div>
  )
}

自定义CSS实现方案 创建Skeleton组件：

const SkeletonElement = ({ type }) => {
  const classes = `skeleton ${type}`
  return <div className={classes}></div>
}

添加CSS样式：

.skeleton {
  background: #ddd;
  overflow: hidden;
  margin: 10px 0;
  border-radius: 4px;
}
.skeleton.text {
  width: 100%;
  height: 12px;
}
.skeleton.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

结合动画效果 添加渐变动画：

@keyframes shimmer {
  0% { background-position: -468px 0 }
  100% { background-position: 468px 0 }
}

.shimmer {
  background: linear-gradient(to right, #eee 8%, #ddd 18%, #eee 33%);
  background-size: 800px 104px;
  animation: shimmer 1.5s infinite linear;
}

条件渲染控制 根据数据状态切换：

function UserProfile({ user }) {
  return (
    <div>
      {user ? (
        <div>
          <img src={user.avatar} alt="avatar" />
          <h2>{user.name}</h2>
        </div>
      ) : (
        <div className="skeleton-wrapper">
          <SkeletonElement type="avatar" />
          <SkeletonElement type="text" />
        </div>
      )}
    </div>
  )
}

复杂布局处理 多区块骨架屏示例：

const ArticleSkeleton = () => (
  <div className="skeleton-article">
    <SkeletonElement type="title" />
    <SkeletonElement type="thumbnail" />
    <div className="skeleton-content">
      <SkeletonElement type="text" />
      <SkeletonElement type="text" />
    </div>
  </div>
)

性能优化建议