ReactJS 语义 ui 加载程序：如何切换活动

Question

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

谢谢。

Answer 1

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

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

ReactJS 语义 ui 加载程序：如何切换活动

ReactJS semantic ui Loader: how to toggle active

javascript

loader

reactjs

semantic-ui