如何创建加载微调器反应

Question

我对反应完全陌生，这就是我的成功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 所在的位置，我想在页面加载时放置一个旋转徽标！冷有人帮助我！？这对理解更多反应会有很大帮助

Answer 1

您可以使用布尔值来显示或不显示自旋，对于此示例，我们可以使用 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>)

Answer 2

创建加载程序文件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';

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

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

Answer 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>

如何创建加载微调器反应

how to create loading spinner react

html

javascript

reactjs

antd