如何隐藏微调器组件

Question

我正在尝试使用react.js spinner组件，但我不知道如何在任务完成后隐藏它。

这是一个简单的代码笔，我在其中使用隐藏属性。我将其设置为 false 或 true 取决于我是否想显示它：

https://codepen.io/manish_shukla01/pen/GLNOyw

    <Spinner hidden={true} size={SpinnerSize.large} label="manish's large spinned" />

Answer 1

使用 state 进行条件渲染。

在 React 中，您可以创建不同的组件来封装您所需的行为。然后，您可以仅渲染其中的一些，具体取决于应用程序的状态。

工作示例（单击选项Dashboard卡）：

容器/仪表板

import isEmpty from "lodash/isEmpty";
import React, { Component } from "react";
import api from "../../utils/api";
import DisplayUser from "../../components/DisplayUser";
import DisplaySignUp from "../../components/DisplaySignUp";
import Spinner from "../../components/Spinner";

class Dashboard extends Component {
  state = {
    isLoading: true,
    currentUser: {}
  };

  componentDidMount = () => {
    this.fetchUsers();
  };

  fetchUsers = async () => {
    try {
      const res = await api.get(`/users/1`);
      setTimeout(() => {
        this.setState({ currentUser: res.data, isLoading: false });
      }, 1500);
    } catch (e) {
      console.error(e.toString());
    }
  };

  // the below can be read like so:
  // if "isLoading" is true...  then display a spinner
  // else if "currentUser" is not empty... then display the user details
  // else show a signup message
  render = () =>
    this.state.isLoading ? (
      <Spinner />
    ) : !isEmpty(this.state.currentUser) ? (
      <DisplayUser currentUser={this.state.currentUser} />
    ) : (
      <DisplaySignUp />
    );
}

export default Dashboard;