如何创建加载微调器反应答案

【问题标题】：how to create loading spinner react如何创建加载微调器反应
【发布时间】：2021-04-21 03:13:47
【问题描述】：

我对反应完全陌生，这就是我的成功Pg：

const firestore = firebase.firestore();

const successPage = props => { 

firebase.auth().onAuthStateChanged((user) => {
    if(user) {
   
more code ....


      .then(() => console.log("email out for delivery!"));

    props.history.push('/clients')
    
    })
    
  }
});
}

// 
        
     

  })

  return (
    <input type="hidden"></input>
  );
  
}
  export default successPage;

return 在哪里，我想在页面加载时放一个旋转徽标！冷谁帮帮我！？这将有助于了解更多反应

【问题讨论】：

您有想要使用的旋转徽标组件吗？

标签： javascript html reactjs antd

【解决方案1】：

创建一个加载器文件 Loader.js 并使用此代码

import React from 'react';

function ShowDetail() {
  return (
    <div className="loader center">
      <i className="fa fa-cog fa-spin" />
    </div>
  );
}

export default ShowDetail;

现在打开你的 App 组件并导入加载器文件

import Loader from './Loader';

导入成功后，设置状态加载为true，作为条件加载器使用。

class App extends Component {
  state = { loading: true };
  render() {
    if (this.state.loading) return <Loader />;
    
    return <ShowDetail details={details} />;
  }
}

【讨论】：

【解决方案2】：

您可以使用布尔值来显示或不显示旋转，对于这个例子，我们可以使用loading

import React, { useEffect, useState } from 'react'
import { Spin } from 'antd'

const [loading, setLoading] = useState(false)

firebase.auth().onAuthStateChanged((user) => {
setLoading(true)
    if(user) {

      .then(() => console.log("email out for delivery!"));

       props.history.push('/clients')
    
    })
    
  }
setLoading(false)
});
return (
<Spin spinning={loading}>
 <input type="hidden"></input>
</Spin>)

【讨论】：

【解决方案3】：

带有 Font Awesome 微调器图标的示例：

const {useState} = React;

const MyComponent = ({}) => {
  const [loading, setLoading] = useState(false);
  
  const startLoad = () => {
    setLoading(true);
    // Bla bla bla ....
    setTimeout(() => {
      setLoading(false);
    }, 3000);
  }
     
  return (
    <div>
      <button onClick={startLoad} disabled={loading}> Load </button>
      {loading && <i className="fas fa-spinner fa-spin" />}
    </div>
  )
}

ReactDOM.render(<MyComponent />, document.getElementById('container'));

button {
  margin-right: 20px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>

<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

<div id="container">
</div>

【讨论】：