在单个页面中引入多个加载器：React JS

Question

我正在尝试实现一个仪表板，其中我有几个需要显示的项目。在下面的示例中，我有 4 个矩形框（实际上是 4 个不同的图表）和一个表格。我将 react-table 用于数据网格，将语义 ui-react 表用于微调器目的。

现在的问题是，这些都是相互独立的。我使用 settimeout 模拟了数据，就好像它来自后端一样。我所需要的只是单独的加载器，只要数据到达，它就应该被隐藏起来。我已将加载器提取为一个单独的组件，以便它充当所有项目的通用加载器。

通常，如果存在，API 会给我一个项目数组，如果不是一个空数组。出于模拟目的，我使用了 setTimeout

可以为每个项目设置单独的标志，但这似乎不是一个好方法。

模拟沙盒：https://codesandbox.io/s/react-table-row-table-vdnfh

App.tsx

import * as React from "react";
import { render } from "react-dom";
import "./styles.css";
import Card from "./Card";

interface IProps {}

interface IState {
  cardData1: any;
  cardData2: any;
  cardData3: any;
  cardData4: any;
}

class App extends React.Component<IProps, IState> {
  constructor(props: any) {
    super(props);
    this.state = {
      cardData1: undefined,
      cardData2: undefined,
      cardData3: undefined,
      cardData4: undefined
    };
  }

  componentDidMount() {
    this.getGraphData();
  }

  // the reason why I call this four times is because, in my case the API is same for all the graphs, only an attribute changes so just mocking it here
  getGraphData = () => {
    this.setGraphData("graph1");
    this.setGraphData("graph2");
    this.setGraphData("graph3");
    this.setGraphData("graph4");
  };

  setGraphData = (cardNumber: string) => {
    //based on the attribute I set the corresponding card data
    if (cardNumber === "graph1") {
      setTimeout(() => {
        this.setState({ cardData1: [1, 2, 3] });
      }, 1000);
    }
    if (cardNumber === "graph2") {
      setTimeout(() => {
        this.setState({ cardData2: [3, 4, 5] });
      }, 2000);
    }

    if (cardNumber === "graph3") {
      setTimeout(() => {
        this.setState({ cardData3: [6, 7, 8] });
      }, 3000);
    }
    if (cardNumber === "graph4") {
      setTimeout(() => {
        this.setState({ cardData4: [] });
      }, 4000);
    }
  };

  render() {
    let { cardData1, cardData2, cardData3, cardData4 } = this.state;
    return (
      <>
        <Card
          name="Card1"
          data={this.state.cardData1}
          spinnerFlag={cardData1 === undefined}
        />
        <Card
          name="Card3"
          data={this.state.cardData2}
          spinnerFlag={cardData2 === undefined}
        />
        <Card
          name="Card3"
          data={this.state.cardData3}
          spinnerFlag={cardData3 === undefined}
        />
        <Card
          name="Card3"
          data={this.state.cardData4}
          spinnerFlag={cardData4 === undefined}
        />
      </>
    );
  }
}

render(<App />, document.getElementById("root"));

Answer 1

当使用绝对定位元素import { Dimmer } from "semantic-ui-react"，并且不希望整个页面有4个重叠元素时，你需要给它们一个相对定位的父元素，例如：

.box {
  position: relative;
}

https://codesandbox.io/s/react-table-row-table-et7ie

---

如果需要区分空卡，API为空卡返回""，则初始状态需要与该值不同，例如：

this.state = {
  cardData1: undefined,
  cardData2: undefined,
  cardData3: undefined,
  cardData4: undefined
};

然后检查该初始值：

<Card
  name="Card1"
  data={this.state.cardData1}
  spinnerFlag={this.state.cardData1 === undefined}
/>

Answer 2

我不完全确定您要解决的问题是什么；您的代码沙箱显示逐卡到达的数据，我认为这就是您想要的。随着每次超时的解决，状态会发生变化，组件会重新渲染，并且会出现新到达的数据。

但是，我看到您将相同的 this.state.spinnerFlag 传递到所有卡片中。相反，您可以根据数据的可用性来计算微调器状态。

<Card
  name="Card1"
  data={this.state.cardData1}
  spinnerFlag={this.state.cardData1 === ""}
/>

然后微调器将准确显示，直到该卡的数据可用为止。