1

我是 React 的新手。

我正在尝试将使用“react-data-table-component”显示的 JSON 数据导出到 CSV 文件。

我通过复制提供的确切代码片段来遵循此链接中的示例。下面是我的代码片段和编译过程中发生的相应错误。

import Export from "react-data-table-component"
import DataTable, { TableColumn, TableStyles } from "react-data-table-component";
import React from "react";

  ---code declarations---

  const actionsMemo = React.useMemo(() => <Export onExport={() => downloadCSV(customerList)} />, []);

  return (
    <>
      <Row>
        <Col lg={3}>
          <Box className="box" sx={{ display: 'flex', alignItems: 'flex-end' }}>
          
            <TextField id="input-with-sx" label="Input National ID" variant="standard" />
            <PersonSearchIcon sx={{ color: 'action.active', mr: 1, my: 0.5 }} />
          </Box>
        </Col>
      </Row>
      <br/>
      <Row>
        <Col lg={12}>
          <div className="card mb-3">
            <div className="card-body">
              <DataTable columns={columns} data={customerList}
                pagination  customStyles={mycustomStyles} actions={actionsMemo}/>
            </div>
          </div>          
        </Col>
      </Row>
    </>
  );

编译错误

有人可以帮助我识别我可能缺少的任何其他模块，以便具有导出数据功能。提前致谢。

4

1 回答 1

1

这实际上是一个进口问题。

import Export from "react-data-table-component"

在此处的这一行中，您正在从包中导入默认导出react-data-table-component并将其分配给变量Export。默认导出是DataTable没有onExport道具的组件。

没有Export从包中导出的组件。您看到的是Export在其文档中使用的本地声明（未导出）的组件。

const Export = ({ onExport }) => <Button onClick={e => onExport(e.target.value)}>Export</Button>;

这是源文件。它依赖于样式化的Button组件。他们在e.target.value这里的使用对我来说没有任何意义。

Export您可以通过将其中任何一个放入您的代码中来创建具有适当 TypeScript 类型的自己的组件：

简单版：

export const Export = ({ onExport }: { onExport: () => void }) => (
  <button onClick={() => onExport()}>Export</button>
);

支持 HTML 的任何属性button（例如className和style）：

type ExportProps = {
  onExport: React.MouseEventHandler<HTMLButtonElement>;
} & JSX.IntrinsicElements["button"];

export const Export = ({ onExport, ...props }: ExportProps) => (
  <button {...props} onClick={onExport}>
    Export
  </button>
);
于 2022-02-12T04:46:31.203 回答