Kendo React PDF导出仅导出Map最后一项问题求助

你的核心问题是单个useRef无法同时绑定多个PDFExport组件——所有循环生成的PDFExport都会覆盖同一个ref实例，导致点击任意按钮只会导出最后一个条目内容。

修改后的完整代码 #

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 },
  ];

  // 用对象存储每个PDFExport的实例，key为item的id
  const pdfExportsRef = useRef({});

  // 接收itemId，找到对应实例执行导出
  const exportPDF = (itemId) => {
    pdfExportsRef.current[itemId]?.save();
  };

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

      {data.map((item) => (
        <div key={item.id}>
          {/* 用回调ref将当前PDFExport实例存入对象 */}
          <PDFExport 
            ref={(el) => pdfExportsRef.current[item.id] = el} 
            paperSize="A4" 
            margin="2cm"
          >
            <p key={item.id}>{item.name}</p>
          </PDFExport>
          {/* 点击时传入当前item的id */}
          <button onClick={() => exportPDF(item.id)}>Export PDF</button>
        </div>
      ))}

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

export default Logout;

关键修改点 #

• 将单个useRef改为存储对象的useRef({})，通过item的id作为key，分别绑定每个PDFExport实例
• 给每个PDFExport设置回调ref，把当前组件实例存入pdfExportsRef.current[item.id]
• 修改exportPDF函数，接收itemId参数，精准找到对应实例调用save()方法
• 按钮点击时传入当前条目的id，确保触发对应条目的导出操作

内容的提问来源于stack exchange，提问作者uriel sabag