在 React 中加载组件之前如何显示加载微调器

Question

我的问题并不像标题那么简单。我正在尝试显示加载组件 1 秒，然后用实际数据替换该组件。

这是我的代码：

const TopNavigationAuth = () => (
<Container>
    <Menu.Item
        name="landing"
        content="Landing"
        as={Link}
        to={routes.LANDING}
    />
    <Menu.Item name="home" content="Home" as={Link} to={routes.HOME} />
    <Menu.Menu position="right">
        <Menu.Item
            name="account"
            content="Account"
            as={Link}
            to={routes.ACCOUNT}
        />
        <UserSection />
        <Menu.Item
            name="signout"
            content={
                <Button
                    content="Sign Out"
                    onClick={authFunctions.doSignOut}
                    primary
                />
            }
        />
    </Menu.Menu>
</Container>
);

所以这里我有 <UserSection /> 组件，它基本上只包含用户的照片和姓名（目前）。我想在 1 或 2 秒后加载该组件，但在那之前我想显示一个微调器。

我正在为我的应用程序使用语义 ui 反应，他们有一个方便的微调器，如下所示：

const LoaderExampleInlineCentered = () => <Loader active inline='centered' />

我可以和这个一起跳ui舞吗？

Answer 1

您可以有条件地呈现两个组件之一，Loader 或 UserSection。

this.state.profileExist === true ? <UserSection /> : <Loader />

然后在componentDid挂载中初始化profileExist为False，然后使用setTimeout设置为true

componentDidMount() {
    this.setState({profileExist: false})
    setTimeout(() => { 
          this.setState({profileExist: true})
    }, 1000);
}

在 React 中加载组件之前如何显示加载微调器

How to show a loading spinner until component loads in React

loading

spinner

reactjs