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

Question

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

现在的问题是，这些都是相互独立的。我已经使用 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

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

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

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

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

Answer 2

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

.box {
  position: relative;
}

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

如果需要区分空卡和空卡的API returns ""，那么初始状态需要与那个值不同，例如：

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

然后检查初始值：

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

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

Bringing in multiple loaders in a single page: React JS

javascript

promise

ecmascript-5

ecmascript-6

reactjs

App.tsx