reactjs - Hvordan tilføjer man ref til CSVLINK i React TypeScript?

Jeg vil klikke på CSV-downloadlinket, efter at dataene er indlæst fra serveren. Jeg har prøvet alle tilgange fra https://github.com/react-csv/react-csv/issues/237

const csvLinkRef = React.useRef<CSVLink & HTMLAnchorElement & { link?: HTMLAnchorElement }>();

<CSVLink
  ref={csvLinkRef}
  data={tableDataToDownLoadAsCSV}
/>

Svar #1

se på denne kode, den vil hjælpe med at justere din kode

export default function dataListPage(props: DataListProps) {
const csvLinkRef = useRef<
    CSVLink & HTMLAnchorElement & { link: HTMLAnchorElement }
  >(null); // setup the ref that we'll use for the hidden CsvLink click once we've updated the data

const [data, setData] = useState<dataTypeObj[]>([]);

 const hanldeExportButton = async () => {
    const data: dataTypeObj[] = await fetchData();
    setData(data);
    csvLinkRef?.current?.link.click();
  };

 return (
<CSVLink
        data={data}
        className="exportButton"
        filename="file.csv"
        ref={csvLinkRef}
      >
      </CSVLink>
        <Button
          color="primary"
          variant="contained"
          size="small"
          startIcon={<GetAppIcon />}
          onClick={hanldeExportButton}
        >
          Export As CSV
        </Button>
        );
} //func dataListPage end

Relaterede artikler