React项目中ReactToPrint组件报TS2604错误求助

问题原因 #

你当前用默认导入方式引入ReactToPrint，但react-to-print库的核心组件是命名导出，并非默认导出，导致TypeScript无法识别组件的构造/调用签名，从而抛出该错误。

解决方案步骤 #

• 将默认导入改为命名导入
• （可选）给useRef指定明确的DOM元素类型，增强代码类型安全性

修改后的完整代码 #

import * as React from "react";
import { useRef } from "react";
//import parse from 'html-react-parser';
// 关键修改：改用命名导入
import { ReactToPrint } from "react-to-print";

import { IInputs } from "../generated/ManifestTypes";

import '../css/AppStyles.css';

interface IHTML2PrintComponentProps {
    appContext: ComponentFramework.Context<IInputs>
}

const HTML2PrintComponent: React.FC<IHTML2PrintComponentProps> = ({ appContext }) => {
    // 可选修改：指定ref的类型为HTMLDivElement，提升类型安全
    const componentRef = useRef<HTMLDivElement>(null);

    return(
        <React.Fragment>
            <ReactToPrint
                trigger={ () => <button id="btnImprimitPDF">{ appContext.parameters.ButtonText.raw }</button> }
                content={ () => componentRef.current }
            />
            <div className="pagebreak full-table">
                {/* { document.title = appContext.parameters.DefaultFilename.raw? } */}
                <div ref={ componentRef }>
                    {/* { parse(appContext.parameters.CustomCss.raw?) } */}
                </div>
            </div>
        </React.Fragment>
    );
}

export default HTML2PrintComponent;

额外说明 #

如果修改导入后仍有问题，检查react-to-print的版本：v2及以上版本均使用命名导出，若你安装的是旧版本（v1），则需要保持默认导入，但建议升级到最新稳定版以获得更好的类型支持和功能。

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