react-bootstrap-modal集成react-ag-grid问题：模态框内表格不显示

核心错误：JSX属性写法错误 #

你把columnDefs和rowData当成子元素写在<AgGridReact>标签内部了，这不符合React组件的属性传递规则，AgGridReact根本没接收到这两个参数，自然不会渲染表格。

修正后的代码 #

<Modal.Body>
    <AgGridReact
        columnDefs={columnDefs}
        rowData={rowData}
        className="ag-theme-alpine"
        style={{ height: '400px' }}
    />
</Modal.Body>

额外必做检查 #

• 设置表格高度：AgGrid必须有明确的高度才能显示，要么给<AgGridReact>加style={{ height: '400px' }}，要么给Modal.Body设置高度，否则表格会因为高度为0而看不见。
• 导入AgGrid样式：确保在组件里导入了AgGrid的基础样式和主题样式，比如：

  import '@ag-grid-community/styles/ag-grid.css';
  import '@ag-grid-community/styles/ag-theme-alpine.css';
  

  同时给<AgGridReact>加上对应的主题类名（比如ag-theme-alpine），不然表格样式会错乱甚至不显示。
• 验证props是否有效：在模态框组件里打印console.log(columnDefs, rowData)，确认这两个参数确实有数据，没有传空或者undefined。
• 确认依赖安装：检查是否已经安装了@ag-grid-community/react和@ag-grid-community/core这两个核心包，没装的话用npm或yarn补上。

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