React TypeScript环境下AG Grid打印功能实现问题求助

我在React+TypeScript环境中实现AG Grid的打印功能，使用document.querySelector('#myGrid')获取元素后，无法访问style、width、height属性，代码出现波浪线提示，这些属性是实现页面正常打印的关键，求解决。

原代码参考 #

函数调用部分 #

const onFirstDataRendered = params => {
  params.api.expandAll();
};
function setPrinterFriendly(api) {
 const eGridDiv = document.querySelector('#myGrid');
 eGridDiv.style.height = '';
 api.setDomLayout('print');
}
function setNormal(api) {
 const eGridDiv = document.querySelector('#myGrid');
 eGridDiv.style.width = '700px';
 eGridDiv.style.height = '200px';
 api.setDomLayout(null);
}
const onBtnPrint = () => {
 const api = gridApi;
 setPrinterFriendly(api);
 setTimeout(function () {
  print();
  setNormal(api);
 }, 2000);
};

JSX部分 #

<div className="ag-theme-alpine" style={{ height: '500px' }} id="myGrid">
  <AgGridReact
    rowData={tableData}
    defaultColDef={defaultColDef}
    columnDefs={columnDefs}
    onGridReady={onGridReady}
    pagination={true}
    paginationPageSize={12}
    enableBrowserTooltips={true}
    ref={gridRef}
    suppressExcelExport={true}
    popupParent={popupParent}
    rowSelection={'multiple'}
    suppressRowClickSelection={true}
    overlayNoRowsTemplate={overlayNoRowsTemplate}
    animateRows={true}
    onFirstDataRendered={onFirstDataRendered}
  ></AgGridReact>
</div> 

问题原因 #

TypeScript中document.querySelector()默认返回Element | null类型，而Element没有style属性——只有HTMLElement才包含style属性，因此TS会抛出类型错误。同时直接访问eGridDiv.style还存在空值风险（如果元素找不到会导致运行时错误）。

解决方法 #

方法1：类型断言+空值检查 #

直接对查询到的元素进行类型断言，同时添加空值判断避免运行时报错：

修改后的函数代码：

const onFirstDataRendered = (params: any) => {
  params.api.expandAll();
};

function setPrinterFriendly(api: any) {
  // 断言为HTMLElement并处理null情况
  const eGridDiv = document.querySelector('#myGrid') as HTMLElement | null;
  if (eGridDiv) {
    eGridDiv.style.height = '';
  }
  api.setDomLayout('print');
}

function setNormal(api: any) {
  const eGridDiv = document.querySelector('#myGrid') as HTMLElement | null;
  if (eGridDiv) {
    eGridDiv.style.width = '700px';
    eGridDiv.style.height = '200px';
  }
  api.setDomLayout(null);
}

const onBtnPrint = () => {
  const api = gridApi;
  setPrinterFriendly(api);
  setTimeout(function () {
    print();
    setNormal(api);
  }, 2000);
};

方法2：使用React Ref替代原生查询（推荐） #

在React开发中，更推荐使用Ref获取DOM元素，符合React的数据流模式，同时能自动获得正确的TS类型：

1. 定义Ref并绑定到容器元素：

import { useRef } from 'react';

// 定义Ref，指定类型为HTMLDivElement
const gridContainerRef = useRef<HTMLDivElement>(null);

// JSX部分替换原id绑定为ref
<div className="ag-theme-alpine" style={{ height: '500px' }} ref={gridContainerRef}>
  <AgGridReact
    rowData={tableData}
    defaultColDef={defaultColDef}
    columnDefs={columnDefs}
    onGridReady={onGridReady}
    pagination={true}
    paginationPageSize={12}
    enableBrowserTooltips={true}
    ref={gridRef}
    suppressExcelExport={true}
    popupParent={popupParent}
    rowSelection={'multiple'}
    suppressRowClickSelection={true}
    overlayNoRowsTemplate={overlayNoRowsTemplate}
    animateRows={true}
    onFirstDataRendered={onFirstDataRendered}
  ></AgGridReact>
</div>

2. 修改函数逻辑使用Ref：

const onFirstDataRendered = (params: any) => {
  params.api.expandAll();
};

function setPrinterFriendly(api: any) {
  // 检查Ref是否存在
  if (gridContainerRef.current) {
    gridContainerRef.current.style.height = '';
  }
  api.setDomLayout('print');
}

function setNormal(api: any) {
  if (gridContainerRef.current) {
    gridContainerRef.current.style.width = '700px';
    gridContainerRef.current.style.height = '200px';
  }
  api.setDomLayout(null);
}

const onBtnPrint = () => {
  const api = gridApi;
  setPrinterFriendly(api);
  setTimeout(function () {
    print();
    setNormal(api);
  }, 2000);
};

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