react使用loading组件

React 中使用 Loading 组件可以让用户在等待数据加载时看到一个指示器，以提高用户体验。以下是一个简单的 Loading 组件的示例代码：

import React, { useState } from 'react';

function Loading() {
  return (
    <div className="loading">
      <span>Loading...</span>
    </div>
  );
}

function App() {
  const [isLoading, setIsLoading] = useState(false);

  function fetchData() {
    setIsLoading(true);

    // 模拟数据加载
    setTimeout(() => {
      setIsLoading(false);
    }, 2000);
  }

  return (
    <div className="App">
      <button onClick={fetchData}>Fetch Data</button>

      {isLoading ? <Loading /> : <span>Some data loaded successfully!</span>}
    </div>
  );
}

export default App;

在上面的代码中，Loading 组件只是简单地显示一个“Loading...”文本。在 App 组件中，我们使用 useState Hook 来维护一个 isLoading 状态变量。当用户点击“Fetch Data”按钮时，我们将 isLoading 设置为 true，以显示 Loading 组件。当数据加载成功后，我们将 isLoading 设置为 false，以显示加载成功的数据。