AgGrid渲染空白

Question

我已经尝试了所有方法，但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

Answer 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 网格示例在 HTML、BODY 和<div id="app">CSS 元素上设置了高度。

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