使用forwardRef和react-pdf的PDFDownloadLink出现React警告：Functions are not valid as a React child

报错原因 #

你遇到的Functions are not valid as a React child报错的核心原因是PDFDownloadLink的子节点写法不符合组件要求：

• PDFDownloadLink的直接子元素必须是一个接收loading参数的渲染函数，函数返回需要渲染的DOM结构
• 你当前的代码把渲染函数放在了<div ref={ref}>的内部，React无法直接将函数作为组件子节点渲染，因此抛出警告，同时组件渲染异常导致点击下载操作时常失败。

修改后可运行代码 #

import { useRef, forwardRef } from 'react';
import { PDFDownloadLink } from '@react-pdf/renderer';
// 此处保留你原有TestPDF组件的引入逻辑

const YourComponent = () => {
  const pdfRef = useRef(null);
    
  window.onload = () => {
    let reloading = sessionStorage.getItem("reloading");
    if (reloading) {
      sessionStorage.removeItem("reloading");
      pdfRef.current.click();
    }
  }

  const handlePDF = () => {
    sessionStorage.setItem("reloading", "true");
    window.location.reload(false);
  };

  const PdfLinkButton = forwardRef((props, ref) => (
    <div style={{ display: "none" }}>
      <PDFDownloadLink
        className="btn btn-primary mb-5"
        style={{ backgroundColor: "#0A71F1", color: "white" }}
        document={<TestPDF />}
        fileName="Informe CMF.pdf"
      >
        {({ loading }) => (
          <div ref={ref}>
            {loading ? "Loading" : "Download PDF "}
          </div>
        )}
      </PDFDownloadLink>
    </div>
  ));

  return (
    <>
      <button onClick={ handlePDF } className="btn btn-primary mb-5">
        Download PDF
      </button>
      <PdfLinkButton ref={ pdfRef } /> 
    </>
  )
}

export default YourComponent;

额外调整说明 #

• 把原来包裹PDFDownloadLink的隐藏button替换成了div，避免多层按钮嵌套导致的点击事件异常
• 将所有HTML属性class替换为React规范的className，避免属性不生效问题
• 把ref放在渲染函数返回的div内，确保重载后能正确触发点击动作，PDF生成逻辑不会被中断

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