阻止 React Suspense 覆盖整个页面

Question

我正在尝试使用 react lazy。我不希望悬念覆盖页面，但是当它加载一个组件时，它会在整个页面上显示悬念被阻止的图标。我怎样才能在组件应该在的位置显示它？

惰性函数：

const LandingPage = lazy(() =>
  import('./auth/landing/landing').then(({ LandingPage }) => ({ default: LandingPage }))
);

<Suspense fallback={<Loader />}>
              <LandingPage />
              </Suspense>

加载程序组件：

import React from 'react';
import classnames from 'classnames';
import styled from 'styled-components';

// eslint-disable-next-line import/no-default-export
export default React.memo(styled(({ className }) => (
  <div className={classnames('loader', className)}>
    <span className="loader__ball loader__ball--1" />
    <span className="loader__ball loader__ball--2" />
    <span className="loader__ball loader__ball--3" />
  </div>
))`
  display: flex;
  position: absolute;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;

  span.loader__ball {
    display: inline-block;
    margin: auto 0.25rem;
    height: 0.75rem;
    width: 0.75rem;
    border-radius: 0.375rem;
    background: #000000;

    &.loader__ball--1,
    &.loader__ball--2,
    &.loader__ball--3 {
      animation: bulging 2s infinite ease-in-out;
    }

    &.loader__ball--1 {
      animation-delay: -0.4s;
    }

    &.loader__ball--2 {
      animation-delay: -0.2s;
    }

    @keyframes bulging {
      0%,
      80%,
      100% {
        transform: scale(0);
        opacity: 0.5;
      }
      40% {
        transform: scale(1);
        opacity: 1;
      }
    }
  }
`);

感谢任何愿意回答的人:)

Answer 1

这可能是因为您的 CSS。

  position: absolute;
  width: 100%;
  height: 100%;

如果你没有容器（你的 Suspense 所在的位置）position: relative 你最终会得到一个绝对定位的球并在整个屏幕上伸展。

我把你的代码片段放在一个普通的 HTML/CSS fiddle 中，所以你可以看到要做什么：

https://jsfiddle.net/qLzcuo7h/

如您所见，您会希望加载器位于两个组件框内。但他们不是。

您需要添加 position: relative 到 .component 以使其工作。

在你给出的代码中，我看不到你的父元素是什么元素，因为 Suspense 是外部元素。我看不出你要把那个元素放在哪里。

以下fiddle是相对加法

https://jsfiddle.net/qLzcuo7h/1/

希望这会解决问题。

阻止 React Suspense 覆盖整个页面

Block React Suspense to cover the whole page

javascript

css

reactjs