javascript - 自定义加载器不适用于 react-table
问题描述
我正在尝试使用语义 ui-react 提供的 Spinner 覆盖 react-table 提供的默认加载器。但这似乎行不通。我维护了三个组件;一个是 App,一个用于 Data Grid,另一个用于 Spinner。有人可以在这里帮助我吗?
沙盒:https ://codesandbox.io/s/react-table-row-table-g3kd5
应用组件
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";
import ReactTable from "react-table";
import "react-table/react-table.css";
import Spinner from "./Spinner";
export default class DataGrid extends React.Component {
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";
const Spinner: React.FunctionComponent = props => {
return (
<div>
<Loader active={props.spinnerFlag}>Loading</Loader>
</div>
);
};
export default Spinner;
解决方案
好吧,你错过了一些东西。
首先,如果你检查你的沙箱,它确实会在最后显示加载,但有一个问题。你需要做两件事
1- 为您的 Spinner 提供适当的样式,使其出现在您的表格上而不是下方。
2-您需要利用您传递给 ReactTable 组件的加载道具。因为现在你的 Spinner 总是可见的,它不受加载道具的控制
您的微调器组件应该使用 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;
现在你应该可以看到你的加载器了。这里是沙盒
希望这可以帮助
推荐阅读
- python - 打印html标签的子p元素
- ios - ActionCable 答案解析
- botframework - bot 框架 - luis v3.0 中不提供 luis 实体分数
- java - Cassandra CompressedRandomAccessReader 内存不足错误
- c# - c#在执行长时间运行的任务时显示流程表单似乎卡住了
- postgresql - 如何在没有 -c 标志的情况下将本地 Postgres 转储合并到 AWS RDS?
- jquery - 如何在 DataTable 多级分组中获取组以设置组行样式?
- python - 使用 passlib 可以注册密码但无法再次验证它得到错误
- python - 如何在 spyder (python) 中使用标准的 eclipse 字体 (java)?
- python - OSError:无法将模式 F 写入 JPEG