React项目中AgGrid组件DOM存在但页面渲染空白问题求助

问题原因 #

ag-grid 要求容器必须设置显式高度才能正常渲染内容，你当前代码中没有给 AgGridReact 组件或其上层容器指定高度，导致容器默认高度为0，就会出现DOM结构存在但页面无可见内容的问题。

修复方案 #

你可以任选以下一种方式修改：

• 直接给 AgGridReact 组件添加高度样式

<AgGridReact 
    className="ag-theme-alpine"
    modules={modules}
    columnDefs={columnDefs}
    defaultColDef={defaultColDef}
    rowData={rowData}
    // 新增以下样式，高度可根据需求调整
    style={{height: 600, width: '100%'}}
/>

• 给上层容器设置高度，再让ag-grid占满剩余空间

return (
    // 外层容器设置高度，此处用100vh占满视口为例
    <div style={{height: '100vh'}}>
        <h1>Main page</h1>
        <AgGridReact 
            className="ag-theme-alpine"
            modules={modules}
            columnDefs={columnDefs}
            defaultColDef={defaultColDef}
            rowData={rowData}
            style={{height: 'calc(100% - 40px)', width: '100%'}}
        />
    </div>
);

可选优化 #

可以把 rowData 的初始值设为空数组，避免数据加载前的潜在异常：

const [rowData, setRowData] = useState([]);

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