Ag Grid 渲染空白答案

【问题标题】：AgGrid rendering blankAg Grid 渲染空白
【发布时间】：2021-12-08 03:05:49
【问题描述】：

我一直在尝试所有方法，但 ag-grid 和 react 没有呈现。它存在于元素中，但没有显示任何内容。

请参阅下面的代码，它是文档的精确副本，删除了不必要的代码。无法获得两个示例之间的差异。

https://www.ag-grid.com/react-data-grid/reactui/

use strict';

import React, { useMemo, useEffect, useState } from 'react';
import { render } from 'react-dom';
import { AgGridReact } from '@ag-grid-community/react';
import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
import '@ag-grid-community/core/dist/styles/ag-grid.css';
import '@ag-grid-community/core/dist/styles/ag-theme-alpine.css';


function GridExample() {

    // never changes, so we can use useMemo
    const modules = useMemo( ()=> [ClientSideRowModelModule], []);

    // never changes, so we can use useMemo
    const columnDefs = useMemo( ()=> [
        { field: 'athlete' }
    ], []);

    // never changes, so we can use useMemo
    const defaultColDef = useMemo( ()=> ({
        resizable: true,
        sortable: true
    }), []);

    // changes, needs to be state
    const [rowData, setRowData] = useState();

    // gets called once, no dependencies, loads the grid data
    useEffect( ()=> {
        fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
            .then( resp => resp.json())
            .then( data => setRowData(data));
    }, []);

    return (
        <div>
            <h1>Main page</h1>
        <AgGridReact 
            className="ag-theme-alpine"
            modules={modules}
            columnDefs={columnDefs}
            defaultColDef={defaultColDef}
            rowData={rowData}
        />
        </div>
    );
}

export default GridExample;

完整代码： https://codesandbox.io/s/cocky-bhaskara-11sk1?file=/src/GridExample.jsx

【问题讨论】：

标签： reactjs ag-grid

【解决方案1】：

网格正在渲染，但问题是它没有高度，因为周围的 DIV 没有高度。

这可以通过修改 App.js 以提供带有 height 集的周围 DIV 在您的代码示例示例中解决。

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <div style={{height:"400px"}}>
      <GridExample></GridExample>
      </div>
    </div>
  );
}

或者在您问题的示例中：

    return (
        <div style={{height:"400px"}}>
            <h1>Main page</h1>
        <AgGridReact 
            className="ag-theme-alpine"
            modules={modules}
            columnDefs={columnDefs}
            defaultColDef={defaultColDef}
            rowData={rowData}
        />
        </div>
    );

AG Grid 示例在 CSS 中的 HTML、BODY 和 <div id="app"> 元素上设置了高度。

html, body, #app {
   height: 100%;
   width: 100%;
   margin: 0;
   box-sizing: border-box;
   -webkit-overflow-scrolling: touch;
}

【讨论】：

【解决方案2】：

我理解的方式是网格没有固有高度，这与您过去看到的其他元素不同，例如包含文本的 p，其中高度是文本高度。所以网格必须依赖容器高度，但默认情况下html和body的高度为0，它期望网格的子元素根据其内容处理大小。

解决此问题的方法是确保AgGridReact 上方的所有容器都具有 100% 的高度。

<div style={{ height: "100%" }}>
  <AgGridReact
    reactUi="true"
    className="ag-theme-alpine"
    modules={modules}
    columnDefs={columnDefs}
    defaultColDef={defaultColDef}
    rowData={rowData}
  />
</div>

.App {
  font-family: sans-serif;
  text-align: center;
  height: 100%;
}

#root {
  height: 100%;
}

html,
body {
  height: 100%;
}

【讨论】：