我正在尝试使用react-table提供的默认加载程序和语义ui-react提供的Spinner。但这似乎不起作用。我维护了三个部分;一个是App,一个是Data Grid,另一个是Spinner。有人可以帮我吗?
沙箱:{{3}}
应用组件
import * as React from "react";
import { render } from "react-dom";
import DataGrid from "./DataGrid";
interface IProps {}
interface IState {
data: {}[];
columns: {}[];
loading: boolean;
}
class App extends React.Component<IProps, IState> {
constructor(props: any) {
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";
import ReactTable from "react-table";
import "react-table/react-table.css";
import Spinner from "./Spinner";
interface IProps {
data: any;
columns: any;
loading: boolean;
}
interface IState {}
export default class DataGrid extends React.Component<IProps, IState> {
render() {
return (
<>
<ReactTable
loading={this.props.loading}
data={this.props.data}
LoadingComponent={Spinner}
columns={this.props.columns}
/>
</>
);
}
}
import { Loader } from "semantic-ui-react";
import * as React from "react";
interface IProps {
spinnerFlag: boolean;
}
const Spinner: React.FunctionComponent<IProps> = props => {
return (
<div>
<Loader active={props.spinnerFlag}>Loading</Loader>
</div>
);
};
export default Spinner;
答案 0 :(得分:1)
好的,你缺少什么。
第一件事是,如果您检查沙盒,它的确会在最后显示加载,但存在问题。 您需要做两件事
1-给您的微调框适当的样式,使其不会出现在表下方。
2-您需要利用传递给ReactTable组件的加载道具。因为现在您的微调框始终可见,因此不受加载道具的控制
您的微调器组件应使用props.loading而不是props.spinnerFlag,因为这就是传递给ReactTable组件的原因
以此更改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;
现在您应该可以看到您的装载机了。 这是Sandbox
希望这会有所帮助