时间戳

首页 > 解决方案 > ReactJS 语义 ui Loader：如何切换为活动状态

javascript - ReactJS 语义 ui Loader：如何切换为活动状态

问题描述

我有以下加载程序（active已注释，因为默认情况下不得看到加载程序）：

import React from 'react'
import { Dimmer, Loader, Segment } from 'semantic-ui-react'

const DefaultLoader = () => (
  <Segment>
    <Dimmer
        //active
        page={true}>
      <Loader />
    </Dimmer>
  </Segment>
)

export default DefaultLoader;

我不确定如何active在需要时更改道具。我有这样加载的组件：

render() {
  return (
    <div className='Lesson-editor'>

      <DefaultLoader />

      ...
      ...

    </div>
  );
}

我想在这个函数完成之前显示加载器：

const lessonID = await ARSaveLesson(lesson, sectionsToDB);

谢谢你。

标签： javascriptreactjssemantic-uiloader

解决方案

您需要设置一个活动状态并将其作为道具传递，以使您的加载器处于活动或非活动状态。

const DefaultLoader = (props) => (
  <Segment>
    <Dimmer
        active = {props.active}
        page={true}>
      <Loader />
    </Dimmer>
  </Segment>
)

保持活跃状态​​，

state = {active:false}

并将此状态传递给DefaultLoader

<DefaultLoader active={this.state.active} />

现在，当您想显示加载程序时，请执行此操作，

this.setState({active:true})

要使其处于非活动状态，请执行此操作，

this.setState({active:false})

推荐阅读