Как добавить ссылку на CSVLINK в react typescript?

#reactjs #typescript #react-redux #export-to-csv

#reactjs #typescript #react-redux #экспорт в csv

Вопрос:

Я хочу щелкнуть ссылку для загрузки CSV после загрузки данных с сервера. Я перепробовал все подходы из https://github.com/react-csv/react-csv/issues/237

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

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

Это дает мне следующую ошибку

Ответ №1:

посмотрите на этот код, это поможет настроить ваш код

 export default function dataListPage(props: DataListProps) {
const csvLinkRef = useRef<
    CSVLink amp; HTMLAnchorElement amp; { 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