如何实现模仿子组件表单结构的通用骨架加载组件？

针对你面试遇到的通用骨架加载需求，这里提供一套可复用的方案，解决你提到的props依赖报错、动画元素识别、redux hook失效等问题：

核心思路：Mock Props预渲染 + 约定式骨架标记 #

不用手动克隆组件结构，而是给目标组件提供最小可行的Mock Props，让它能渲染出完整的DOM结构（不会因为props缺失报错），再通过约定的类名标记需要添加动画的元素，最后用CSS实现骨架动画。

1. 解决组件依赖props的问题：Mock Props工厂函数 #

每个表单组件对应一个getMockProps函数，返回能让组件正常渲染的最小props集合：

• 对于必填的普通props，给空值或默认占位符（比如输入框对应空字符串，列表对应空数组）
• 对于redux的useSelector依赖，有两种处理方式：
  • 方式一：在组件内添加加载状态判断，当isLoading为true时，不执行useSelector，直接用mock数据
  • 方式二：用自定义的mock Redux Provider包裹加载状态下的组件，提供静态的mock state，替代真实store

示例Mock Props函数：

// 针对UserForm组件的mock props
const getMockUserFormProps = () => ({
  user: { name: '', email: '' }, // 覆盖必填的user prop
  onSubmit: () => {} // 覆盖必填的回调函数
});

2. 通用骨架HOC实现 #

写一个withSkeleton高阶组件，接收目标组件和Mock Props函数，根据isLoading状态切换渲染逻辑：

• 非加载状态：渲染真实组件，传递真实props
• 加载状态：用Mock Props渲染组件，给约定好的元素添加骨架动画

完整HOC代码：

import React from 'react';

// 全局骨架动画样式
const skeletonAnimationCSS = `
  .skeleton-target {
    background-color: #f0f0f0;
    overflow: hidden;
    position: relative;
  }
  .skeleton-target.skeleton-animate::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
      rgba(255,255,255,0) 0%, 
      rgba(255,255,255,0.6) 50%, 
      rgba(255,255,255,0) 100%);
    animation: skeleton-slide 1.5s infinite;
  }
  @keyframes skeleton-slide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }
`;

const withSkeleton = (Component, getMockProps) => {
  return ({ isLoading, ...props }) => {
    if (!isLoading) {
      return <Component {...props} />;
    }

    const mockProps = getMockProps();
    // 渲染mock组件，并给所有.skeleton-target元素添加动画类
    return (
      <>
        <style>{skeletonAnimationCSS}</style>
        <div className="skeleton-container">
          <Component {...mockProps} />
        </div>
      </>
    );
  };
};

3. 组件内标记骨架元素 #

在目标表单组件中，给需要显示骨架动画的元素（输入框容器、文本块、按钮等）添加skeleton-target skeleton-animate类：

const UserForm = ({ user, onSubmit }) => (
  <form onSubmit={onSubmit}>
    <div className="form-group skeleton-target skeleton-animate">
      <label>用户名</label>
      <input type="text" value={user.name} disabled />
    </div>
    <div className="form-group skeleton-target skeleton-animate">
      <label>邮箱</label>
      <input type="email" value={user.email} disabled />
    </div>
    <button type="submit" className="skeleton-target skeleton-animate">提交</button>
  </form>
);

4. 处理Redux useSelector失效问题 #

如果组件依赖useSelector，可以在组件内做条件判断，加载状态下跳过真实的store读取：

import { useSelector } from 'react-redux';

const UserForm = ({ isLoading, user, onSubmit }) => {
  // 加载状态下用mock数据，否则读取真实store
  const currentUser = isLoading ? { name: '', email: '' } : useSelector(state => state.user);

  return (
    <form onSubmit={onSubmit}>
      {/* 表单内容 */}
    </form>
  );
};

或者，在HOC中用Mock Provider包裹组件：

import { Provider } from 'react-redux';
import { createStore } from 'redux';

// 模拟redux reducer
const mockReducer = (state = { user: { name: '', email: '' } }, action) => state;
const mockStore = createStore(mockReducer);

const withSkeleton = (Component, getMockProps) => {
  return ({ isLoading, ...props }) => {
    if (!isLoading) {
      return <Component {...props} />;
    }

    return (
      <>
        <style>{skeletonAnimationCSS}</style>
        <Provider store={mockStore}>
          <Component {...getMockProps()} />
        </Provider>
      </>
    );
  };
};

最终使用方式 #

// 包装组件
const UserFormWithSkeleton = withSkeleton(UserForm, getMockUserFormProps);

// 父组件中使用
const App = () => {
  const [isLoading, setIsLoading] = React.useState(true);

  // 模拟数据加载
  React.useEffect(() => {
    setTimeout(() => setIsLoading(false), 2000);
  }, []);

  return (
    <div>
      <UserFormWithSkeleton 
        isLoading={isLoading} 
        user={{ name: '张三', email: 'zhangsan@example.com' }} 
        onSubmit={() => {}} 
      />
    </div>
  );
};

这个方案的优势：

• 无需手动克隆组件结构，复用原组件的DOM结构
• 通过Mock Props解决props依赖报错问题
• 约定式类名让动画元素识别更清晰
• 支持Redux等状态管理工具的组件

内容的提问来源于stack exchange，提问作者Rajesh Dixit