时间戳

首页 > 解决方案 > 如何仅在 React 中完成渲染时才显示渲染？

javascript - 如何仅在 React 中完成渲染时才显示渲染？

问题描述

希望这听起来不是一个愚蠢的问题，但是我在这里搜索过的所有查询和 Google 都询问是否仅在获取/请求完成后才显示渲染。

我希望我的 React 应用程序仅在渲染完成后才显示渲染，包括 CSS。目前，在几分之一秒内，您可以看到正在构建的页面 - 在一瞬间，但它仍然不是 UX 的流畅流动。有没有办法只在渲染（包括 CSS）完成后才加载页面？我不想在加载页面上执行 setTimeout，因为这非常笨重。

提前谢谢了

下面的代码：

import React, { useEffect, useContext } from 'react';
import { NavLink } from 'react-router-dom';
import axios from 'axios';
import '../../styles/MleaveReqUpper.css';
// import '../../styles/leaveRequests.css';
import leftArrow from '../../img/general/leftArrow.svg';
import teamsGrad from '../../img/general/teamsGrad.png';
import returnBack from '../../img/general/returnBack.svg';
import cog from '../../img/general/cog.svg';
import checklist from '../../img/general/checklist.svg';
import { DataContext } from '../../contexts/DataContext';

import $ from 'jquery';
import requestsSelected from '../../img/mFooter/requestsSelected.svg';

const MLeaveReqUpperLinks = () => {
  const { teamAllows, toggleTeamAllows } = useContext(DataContext);

  const navBlue = () => {
    $('.f3').attr('src', requestsSelected);
  };

  useEffect(() => {
    axios.get('db.json').then();
  });



  // render
  return (
    <div className='leaveReqUpperContainer'>

      <img className='teamGradientOut' src={teamsGrad} />

      <NavLink to='/requests'>
        <div
          className='backGroup'
          onClick={() => {
            navBlue();
            if (teamAllows) {
              toggleTeamAllows(false);
            }
          }}
        >
          <img
            className='returnBack'
            src={returnBack}
            alt='Back to My Requests'
          />
        </div>
      </NavLink>

      <h3 className='TeamRequests'>Team Requests</h3>

      <div className='iconsM'>
        <NavLink to='team-allowances'>
          <img
            onClick={() => {
              toggleTeamAllows();
            }}
            className={`checklist ${!!teamAllows ? 'iconSelected' : ''}`}
            src={checklist}
            alt='Allowances'
          />
        </NavLink>
        <img className='cog' src={cog} alt='Settings' />
      </div>

      <div className='teamsXbar'>
        <div className='teamsInnerContainer'>
          <div className='teamMenuHolder'>
            <p className='teamName teamSel '>All Staff</p>
          </div>
          <div className='teamMenuHolder'>
            <p className='teamName'>Brewery</p>
          </div>
          <div className='teamMenuHolder'>
            <p className='teamName'>Sales</p>
          </div>
          <div className='teamMenuHolder'>
            <p className='teamName'>Finance</p>
          </div>
          <div className='teamMenuHolder'>
            <p className='teamName'>Operations</p>
          </div>
          <div className='teamMenuHolder'>
            <p className='teamName'>Marketing</p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default MLeaveReqUpperLinks;

标签： javascripthtmlcssreactjs

解决方案

您可以使用加载状态变量

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

useEffect(() => {
  setIsLoading(true);
  axios.get('db.json').then(res=>setIsLoading(false););
});

return isLoading ? null : <div>All your view</div>

推荐阅读