使用 Semantic UI React 加载屏幕答案

【问题标题】：Loading screen using Semantic UI React使用 Semantic UI React 加载屏幕
【发布时间】：2021-07-21 20:39:42
【问题描述】：

我正在尝试显示加载屏幕，同时使用 Semantic UI React 完成应用程序的其余部分加载。

问题是，当我加载页面时，它只显示文本“正在加载”，并且它仅在几秒钟后正确呈现加载器，就像它没有任何 css 一样。拥有一个加载器的目的是它必须在页面前面，而其他内容呈现，但如果它有同样的问题，我不知道如何只在内容呈现并准备好显示时显示内容。

我正在使用语义 ui 反应网页 (https://react.semantic-ui.com/elements/loader/#types-loader) 中的此代码

function App() {

  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setLoading(false);
    }, 2000)
  }, [])
    
  return (
    <div>
      <div style={{ display: loading ? "block" : "none" }}>
        <Dimmer active>
          <Loader content='Loading' />
        </Dimmer>

      </div>

      <div style={{ display: loading ? "none" : "block" }}>
        // Content that needs time to render
      </div>

    </div>
  )
}

export default App;

我该怎么做才能仅在完成渲染时显示内容？

【问题讨论】：

标签： reactjs semantic-ui semantic-ui-react

【解决方案1】：

尝试将其放入Segment。此外，我不会使用您用来显示或隐藏事物的技术，我总是这样做：

{condition && <Component />}

所以在这种情况下，您的代码将是：

{loading === true && <Segment><Dimmer active><Loader content='Loading' /></Dimmer></Segment>}

和

{loading === false && <>
    {/* Content that needs time to render */}
</>}

当然，只要您的 API 调用完成，就将 loading 设置为 false。

希望对您有所帮助并回答问题，如果没有请指出:)。

【讨论】：