我想显示在react中工作时的加载

在React中，当需要在页面中显示加载状态时，可以通过以下方式实现：

使用条件渲染：在组件的render函数中，通过判断加载状态来渲染不同的内容。可以使用一个状态变量，如isLoading，来表示加载状态。当isLoading为true时，渲染加载状态的UI组件；当isLoading为false时，渲染正常的内容。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true
    };
  }

  componentDidMount() {
    // 模拟异步加载数据
    setTimeout(() => {
      this.setState({ isLoading: false });
    }, 2000);
  }

  render() {
    const { isLoading } = this.state;

    if (isLoading) {
      return <LoadingSpinner />;
    }

    return <NormalContent />;
  }
}

使用第三方库：React生态系统中有许多第三方库可以简化加载状态的管理，如react-loading，react-spinner等。这些库提供了多种加载状态的UI组件，可以根据需要选择合适的组件来显示加载状态。

import LoadingSpinner from 'react-loading';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true
    };
  }

  componentDidMount() {
    // 模拟异步加载数据
    setTimeout(() => {
      this.setState({ isLoading: false });
    }, 2000);
  }

  render() {
    const { isLoading } = this.state;

    return (
      <div>
        {isLoading ? (
          <LoadingSpinner type="spin" color="#000" />
        ) : (
          <NormalContent />
        )}
      </div>
    );
  }
}

以上是在React中实现加载状态的两种常见方法。根据具体的项目需求和个人喜好，选择适合的方法来展示加载状态。在腾讯云的产品中，与React相关的产品有云开发（CloudBase）、容器服务（CloudBase-Run）等。你可以访问腾讯云官网了解更多详情。