kendo 中的导出 pdf 反应仅导出地图中的最后一项答案

【问题标题】：Export pdf in kendo react exports only the last item inside mapkendo 中的导出 pdf 反应仅导出地图中的最后一项
【发布时间】：2023-02-23 06:12:05
【问题描述】：

我正在尝试将一些项目导出为 pdf，其中每个项目都有一个按钮，该按钮应将特定项目导出为 pdf。我也试过给每个孩子一把钥匙，但是没有用。

这是我的代码：

import './Logout.css';

import React, { useRef } from "react";

import { NavLink } from 'react-router-dom';

import { PDFExport } from '@progress/kendo-react-pdf';

const Logout = () => {

 const data = [

    { id: 1, name: 'Item 1', value: 100 },
    { id: 2, name: 'Item 2', value: 200 },
    { id: 3, name: 'Item 3', value: 300 },

  ];

const pdfExport = useRef(null);

  const exportPDF = () => {
    pdfExport.current.save();
  };

  return (
    <div className='logOutStyle'>
      <h1> you just loged out</h1>
      <h3> to sing in again click here</h3>


      {data.map((item, i) => (
      <div key={item.id}>
        <PDFExport key={item.id} ref={pdfExport} paperSize="A4" margin="2cm">
          <p key={data[i]}>{data[i].name}</p>
        </PDFExport>
        <button key={item.id} onClick={exportPDF}>Export PDF</button>
      </div>
    ))}

      <NavLink to="/" className="underline text-tertiary">
            return to home page
      </NavLink>
    </div>
 )
}

export default Logout;

在剑道反应文档或聊天 gpt 中没有相关和更新的答案。请帮我。

我研究了整个剑道反应文档，聊天 gpt。我希望有人会醒来，看到这个巨大的问题。

【问题讨论】：

标签： reactjs kendo-react-ui

【解决方案1】：

发生这种情况是因为您将相同的 pdfExport 实例分配给地图中的所有子项，获取最后一个的引用。

您需要为每个元素创建一个新实例：

const pdfExports = data.map(() => useRef(null));

然后在循环中：

const exportPDF = (ref) => {
    ref.current.save();
};

{data.map((item, i) => (
      <div key={item.id}>
        <PDFExport key={item.id} ref={pdfExports[i]} paperSize="A4" margin="2cm">
          <p key={data[i]}>{data[i].name}</p>
        </PDFExport>
        <button key={item.id} onClick={() => exportPDF(pdfExports[i])}>Export PDF</button>
      </div>
))}

【讨论】：