通常，此问题的解决方法是在React组件的 componentDidMount 中调用 ag-grid 的 grid.resizeCanvas() 方法。这将告诉 ag-grid 在组件挂载后重新绘制自身以适应其父容器的尺寸。

以下是一个示例代码片段：

import React, { Component } from 'react';
import { ReflexContainer, ReflexSplitter, ReflexElement } from 'react-reflex';
import 'react-reflex/styles.css';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';

class App extends Component {
  constructor(props) {
    super(props);

    this.gridOptions = {
      columnDefs: [
        { headerName: 'Make', field: 'make' },
        { headerName: 'Model', field: 'model' },
        { headerName: 'Price', field: 'price' },
      ],
      rowData: [
        { make: 'Toyota', model: 'Celica', price: 35000 },
        { make: 'Ford', model: 'Mondeo', price: 32000 },
        { make: 'Porsche', model: 'Boxter', price: 72000 },
      ],
    };
  }

  componentDidMount() {
    this.gridApi && this.gridApi.sizeColumnsToFit();
  }
  
  onGridReady = params => {
    this.gridApi = params.api;
  };

  render() {
    return (
      
        
          
        
        
        
          

            This is the detail panel. It could contain anything!
          
        
      
    );
  }
}

在这个示例中，componentDidMount方法中调用了grid.resizeCanvas()方法，因此ag-grid将在组件挂载后自适应其父容器的尺