Ag 网格渲染空白

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

我的理解是网格没有固有高度，这与您以前看到的其他元素不同，例如 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%;
}

Answer 2

网格正在渲染，但问题是它没有高度，因为周围的 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;
}

Ag 网格渲染空白

AgGrid rendering blank

reactjs

ag-grid