Javascript 自定义加载程序未应用于react表

我试图用语义ui react提供的微调器超越react表提供的默认加载程序。但这似乎不起作用。我维护了三个组件；一个是应用程序，一个用于数据网格，另一个用于微调器。有人能帮我吗

沙箱：

应用程序组件

import * as React from "react";
import { render } from "react-dom";
import DataGrid from "./DataGrid";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      columns: [],
      loading: true
    };
  }

  componentDidMount() {
    this.getData();
    this.getColumns();
  }

  getData = () => {
    let data = [
      { firstName: "Jack", status: "Submitted" },
      { firstName: "Simon", status: "Pending" },
      { firstName: "Pete", status: "Approved" }
    ];
    setTimeout(() => {
      this.setState({ data, loading: false });
    }, 2000);
  };

  getColumns = () => {
    let columns = [
      {
        Header: "First Name",
        accessor: "firstName"
      },
      {
        Header: "Status",
        accessor: "status"
      }
    ];
    this.setState({ columns });
  };

  render() {
    return (
      <>
        <DataGrid
          loading={this.state.loading}
          data={this.state.data}
          columns={this.state.columns}
        />
      </>
    );
  }
}

import*as React from“React”；
从“react dom”导入{render}；
从“/DataGrid”导入DataGrid；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：[]，
列：[]，
加载：正确
};
}
componentDidMount（）{
这是getData（）；
这是getColumns（）；
}
getData=（）=>{
让数据=[
{名字：“杰克”，状态：“已提交”}，
{名字：“西蒙”，状态：“待定”}，
{名字：“皮特”，状态：“批准”}
];
设置超时（（）=>{
this.setState（{data，loading:false}）；
}, 2000);
};
getColumns=（）=>{
让列=[
{
标题：“名字”，
访问者：“名字”
},
{
标题：“状态”，
访问者：“状态”
}
];
this.setState（{columns}）；
};
render（）{
返回(
);
}
}

数据网格

import*as React from“React”；
从“反应表”导入反应表；
导入“react table/react table.css”；
从“/Spinner”导入微调器；
导出默认类DataGrid扩展React.Component{
render（）{
返回(
);
}
}

纺纱机

从“语义ui反应”导入{Loader}；
从“React”导入*作为React；
常量微调器：React.FunctionComponent=props=>{
返回(
加载
);
};
导出默认微调器；

好的，你遗漏了什么

第一件事是，如果你检查你的沙箱，它确实显示在最后加载，但有一个问题。 你需要做两件事

1-为微调器提供适当的样式，使其显示在桌子上，而不是其下方

2-您需要利用传递给ReactTable组件的加载道具。因为现在你的微调器总是可见的，它不是由加载道具控制的

spinner组件应该使用props.loading而不是props.spinnerFlag，因为这是传递给ReactTable组件的内容

将微调器文件更改为

const Spinner: React.FunctionComponent<IProps> = props => {
return props.loading ? (
<div
  style={{
    display: "block",
    position: "absolute",
    left: 0,
    right: 0,
    background: "rgba(255,255,255,0.8)",
    transition: "all .3s ease",
    top: 0,
    bottom: 0,
    textAlign: "center"
  }}
>
  <Loader>Loading</Loader>
</div>
) : null;
};

export default Spinner;

const微调器：React.FunctionComponent=props=>{
返回道具。装载(
加载
)：null；
};
导出默认微调器；

现在，您应该能够看到您的加载程序。 这是

希望这有帮助

import { Loader } from "semantic-ui-react";
import * as React from "react";

const Spinner: React.FunctionComponent = props => {
  return (
    <div>
      <Loader active={props.spinnerFlag}>Loading</Loader>
    </div>
  );
};

export default Spinner;

const Spinner: React.FunctionComponent<IProps> = props => {
return props.loading ? (
<div
  style={{
    display: "block",
    position: "absolute",
    left: 0,
    right: 0,
    background: "rgba(255,255,255,0.8)",
    transition: "all .3s ease",
    top: 0,
    bottom: 0,
    textAlign: "center"
  }}
>
  <Loader>Loading</Loader>
</div>
) : null;
};

export default Spinner;