Reactjs 如何通过导出在非索引文件中呈现react数据网格？

我使用react数据网格渲染数据，但它仅在

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);

尝试使用类名和函数名导出

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);

import React，{useState，Component}来自“React”；
从“react dom”导入react dom；
从“react数据网格”导入ReactDataGrid；
从“react Data grid addons”导入{Toolbar，Data}；
从“/createRowData”导入createRowData；
常量defaultColumnProperties={
可过滤：正确，
宽度：200
};
常量选择器=数据选择器；
常量列=[
{
密钥：“ID”，
姓名：“ID”
},
{
密钥：“数据”，
名称：“数据”
},
{
键：“名字”，
姓名：“名字”
},
{
关键字：“金额”，
名称：“金额”
}
].map（c=>（{…c，…defaultColumnProperties}））；
常量行计数=50；
常量handleFilterChange=filter=>filters=>{
const newFilters={…filters}；
if（filter.filterTerm）{
newFilters[filter.column.key]=过滤器；
}否则{
删除newFilters[filter.column.key]；
}
返回新过滤器；
};
函数getRows（行、筛选器）{
返回选择器.getRows（{rows，filters}）；
}
函数示例（{rows}）{
const[filters，setFilters]=useState（{}）；
const filteredRows=getRows（行，过滤器）；
返回(
filteredRows[i]}
rowsCount={filteredRows.length}
最小高度={300}
最小宽度={1300}
工具栏={}
onAddFilter={filter=>setFilters（handleFilterChange（filter））}
onClearFilters={（）=>setFilters（{}）}
/>
);
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

---

需要导出文件以进行路由，需要从另一个文件获取数据以在网格视图中发布，以及用于搜索字段的筛选功能。

我想我理解您面临的问题。你能把上面的改成这个吗

 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 rows = createRowData(50);
    const [filters, setFilters] = useState({});
    const filteredRows = getRows(rows, filters);
    return (
      <ReactDataGrid
        columns={columns}
        rowGetter={i => filteredRows[i]}
        rowsCount={filteredRows.length}
        minHeight={500}
        toolbar={<Toolbar enableFilter={true} />}
        onAddFilter={filter => setFilters(handleFilterChange(filter))}
        onClearFilters={() => setFilters({})}
      />
    );
  }
class datagrid extends Component {

    render() {
        return(
        <Example rows={createRowData(50)} />);
    }
}

export default datagrid;

const ROW\u COUNT=50；
常量handleFilterChange=filter=>filters=>{
const newFilters={…filters}；
if（filter.filterTerm）{
newFilters[filter.column.key]=过滤器；
}否则{
删除newFilters[filter.column.key]；
}
返回新过滤器；
};
函数getRows（行、筛选器）{
返回选择器.getRows（{rows，filters}）；
}
函数示例（{rows}）{
//const rows=createRowData（50）；
const[filters，setFilters]=useState（{}）；
const filteredRows=getRows（行，过滤器）；
返回(
filteredRows[i]}
rowsCount={filteredRows.length}
最小高度={500}
工具栏={}
onAddFilter={filter=>setFilters（handleFilterChange（filter））}
onClearFilters={（）=>setFilters（{}）}
/>
);
}
类datagrid扩展组件{
render（）{
返回(
);
}
}
导出默认数据网格；

Yes。。谢谢，我取得了成果