ReactJS 语义 ui Loader：如何切换为活动状态答案

【问题标题】：ReactJS semantic ui Loader: how to toggle activeReactJS 语义 ui Loader：如何切换为活动状态
【发布时间】：2019-11-16 14:34:28
【问题描述】：

我有以下加载器（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);

谢谢。

【问题讨论】：

标签： javascript reactjs semantic-ui loader

【解决方案1】：

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

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})

【讨论】：