React开发：如何在嵌套组件列表加载完成前显示占位符？

根据你提供的Comp组件代码片段，我整理了几个针对性的实现方案，帮你在Cri列表完全加载完成前展示合适的占位符：

方案1：基于组件状态的基础占位符控制 #

这是最直接易上手的方式，通过isLoaded状态切换占位符与实际Cri列表的显示。首先调整你的初始状态逻辑，再结合数据加载时机更新状态：

class Comp extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoaded: false // 初始标记为未加载状态
    };
  }

  // 组件挂载后，根据数据来源更新加载状态
  componentDidMount() {
    // 如果cri是父组件同步传入的，直接标记加载完成
    // 如果cri是异步请求获取的，把这行代码移到请求成功的回调里
    this.setState({ isLoaded: true });
  }

  // 处理cri数据动态更新的情况
  componentDidUpdate(prevProps) {
    if (prevProps.cri !== this.props.cri) {
      // 新数据到来时先切回未加载状态，再标记完成
      this.setState({ isLoaded: false }, () => {
        this.setState({ isLoaded: true });
      });
    }
  }

  _func = () => {
    const { att, cri, media, res, st } = this.props;
    if (!cri) return null;
    
    return cri.map((row, i) => {
      const state = !row.available ? 'locked' : '';
      // 替换为你的Cri组件渲染逻辑
      return <Cri key={i} row={row} state={state} att={att} />;
    });
  };

  render() {
    const { isLoaded } = this.state;
    
    // 未加载时显示占位符，可以是骨架屏、加载动画或文字
    if (!isLoaded) {
      return (
        <div className="cri-placeholder">
          <div className="skeleton-item"></div>
          <div className="skeleton-item"></div>
          <div className="skeleton-item"></div>
        </div>
      );
    }

    // 加载完成后渲染实际列表
    return <div className="cri-list">{this._func()}</div>;
  }
}

小提示：如果cri数据是异步请求来的，一定要把setState({ isLoaded: true })放在请求成功的回调函数里，而不是componentDidMount中。

方案2：使用React Suspense（React 16.6+） #

如果你的Cri组件是懒加载的，或者需要配合数据层处理异步获取，可以用Suspense来统一管理加载状态，代码更简洁：

// 先通过React.lazy懒加载Cri组件
const Cri = React.lazy(() => import('./Cri'));

class Comp extends Component {
  render() {
    const { cri } = this.props;
    
    return (
      <React.Suspense fallback={
        <div className="cri-placeholder">
          {/* 自定义占位符内容 */}
          加载中，请稍候...
        </div>
      }>
        <div className="cri-list">
          {cri && cri.map((row, i) => {
            const state = !row.available ? 'locked' : '';
            return <Cri key={i} row={row} state={state} />;
          })}
        </div>
      </React.Suspense>
    );
  }
}

小提示：Suspense不仅支持组件懒加载，还可以配合Relay等数据框架处理数据加载的等待状态，适合复杂场景。

方案3：针对Cri内部异步内容的精确控制 #

如果Cri组件本身包含异步操作（比如加载图片、内部接口请求），可以通过子组件回调监听所有Cri的加载完成状态，实现更精确的占位符控制：

// 先给Cri组件添加加载完成回调
class Cri extends Component {
  componentDidMount() {
    // 模拟Cri内部的异步操作，完成后通知父组件
    setTimeout(() => {
      this.props.onLoad();
    }, 1200);
  }

  render() {
    // 你的Cri组件渲染逻辑
    return <div className="cri-item">{/* ... */}</div>;
  }
}

// 改造Comp组件
class Comp extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loadedCount: 0,
      totalCri: this.props.cri ? this.props.cri.length : 0
    };
  }

  handleCriLoad = () => {
    this.setState(prevState => {
      const newCount = prevState.loadedCount + 1;
      return {
        loadedCount: newCount,
        isLoaded: newCount === prevState.totalCri
      };
    });
  };

  render() {
    const { isLoaded, totalCri, loadedCount } = this.state;
    const { cri } = this.props;

    if (!isLoaded) {
      return (
        <div className="cri-placeholder">
          {/* 可以显示加载进度 */}
          <p>已加载 {loadedCount}/{totalCri} 项</p>
          {/* 生成对应数量的骨架屏 */}
          {Array.from({ length: totalCri }).map((_, i) => (
            <div key={i} className="skeleton-item"></div>
          ))}
        </div>
      );
    }

    return (
      <div className="cri-list">
        {cri.map((row, i) => (
          <Cri key={i} row={row} onLoad={this.handleCriLoad} />
        ))}
      </div>
    );
  }
}

小提示：这个方案能确保所有Cri组件的内部异步操作都完成后，才隐藏占位符，适合对加载状态要求严格的场景。

内容的提问来源于stack exchange，提问作者Max Wolfen