我正在使用 react-data-grid 渲染数据,但它只在index.js
文件中工作,但是当我在普通文件中使用时,我无法通过定义类和函数名来导出文件。
尝试使用类名和函数名导出。
import React, { useState, Component } from "react";
import ReactDOM from "react-dom";
import ReactDataGrid from "react-data-grid";
import { Toolbar, Data } from "react-data-grid-addons";
import createRowData from "./createRowData";
const defaultColumnProperties = {
filterable: true,
width: 200
};
const selectors = Data.Selectors;
const columns = [
{
key: "ID",
name: "ID"
},
{
key: "Data",
name: "Data"
},
{
key: "firstname",
name: "first name"
},
{
key: "amount",
name: "Amount"
}
].map(c => ({ ...c, ...defaultColumnProperties }));
const ROW_COUNT = 50;
const handleFilterChange = filter => filters => {
const newFilters = { ...filters };
if (filter.filterTerm) {
newFilters[filter.column.key] = filter;
} else {
delete newFilters[filter.column.key];
}
return newFilters;
};
function getRows(rows, filters) {
return selectors.getRows({ rows, filters });
}
function Example({ rows }) {
const [filters, setFilters] = useState({});
const filteredRows = getRows(rows, filters);
return (
<ReactDataGrid
columns={columns}
rowGetter={i => filteredRows[i]}
rowsCount={filteredRows.length}
minHeight={300}
minWidth={1300}
toolbar={<Toolbar enableFilter={true} />}
onAddFilter={filter => setFilters(handleFilterChange(filter))}
onClearFilters={() => setFilters({})}
/>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<Example rows={createRowData(50)} />, rootElement);
需要导出文件以进行路由,需要从另一个文件中获取数据以在网格视图中发布以及用于搜索字段的过滤器功能。