代码之家 › 专栏 › 技术社区 › dragi

如何显示加载微调器直到组件加载到React中

loading spinner reactjs

dragi · 技术社区 · 6 年前

我的问题没有题目那么简单。我试图显示一个正在加载的组件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 react,它们有一个方便的微调器,如下所示:

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

能给我一些指导吗?

1 回复 | 直到 6 年前

Ravi Rane 6 年前

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

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

然后在componentDid mount中将profileExist初始化为False,然后使用setTimeout将其设置为true

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

推荐文章

Monica Olvera · 访问几个matlab文件中的数据

7 年前

Ali H · 如何等待图像上传到Ionic 2中的firebase存储

7 年前

Florian Müller · 检查元素是否已加载

7 年前

Sharfaraz Bheda · 移动API的Magento自定义模块发送响应花费了太多时间

8 年前

farshad · 当另一个字符串继续打印时,如何打印字符串?

8 年前

JRystedt · 加载仅在按钮功能后显示的动画(Swift)

8 年前

Zack Tombson · 开始活动前加载资源

8 年前

OleSchmitt · jQuery fullPage:同时加载所有图像

8 年前

Justin McGuire · android-loopj中的加载指示器

9 年前

nerdsley · 如何从数据文件中正确加载3x3矩阵?

9 年前