React子元素函数警告排查及AgGrid渲染异常问题求助

先给你梳理两个核心问题的解决思路：

一、列/窗口无法调整大小的原因 #

看你AgGridReact的配置项，很多布尔属性都用了字符串格式（比如suppressMenuHide="true"），但AgGrid的React组件要求这些属性是原生布尔值，字符串类型的"true"/"false"会被AgGrid识别为真值，导致配置不生效。

你需要把所有布尔型的配置改成大括号包裹的布尔值：

<AgGridReact
  columnDefs={this.state.columns}
  rowData={this.props.selectedHistory}
  suppressMenuHide={true}  // 去掉引号，用原生布尔值
  suppressRowClickSelection={false}
  suppressColumnVirtualisation={false}
  sideBar={false}
  rowSelection="single"  // 这个是字符串枚举，无需修改
  enableColResize={true}
  enableSorting={true}
  enableFilter={true}
  onGridReady={this.onGridReady}
/>

另外检查容器高度：你给外层div设置了height: calc(100%)，要确保ModalDynamic内部的父容器也设置了height: 100%，否则AgGrid可能无法获取正确的高度空间，进而影响resize功能。

二、「函数作为React子元素无效」的警告 #

这个警告通常是你把函数直接当作JSX元素渲染了，重点排查这几个地方：

• 检查this.dealerLabel：如果它是一个函数（比如定义为箭头函数但未调用），渲染时要改成{this.dealerLabel()}，而不是直接写{this.dealerLabel}。
• 检查OverlayTrigger的overlay属性：如果this.csvTip是返回Tooltip元素的函数，要确保正确处理——如果是函数组件，写成overlay={<this.csvTip />}；如果是返回元素的普通函数，改成overlay={() => this.csvTip()}。
• 确认ModalDynamic的dismissAction：如果这个组件内部错误地把dismissAction当作子元素渲染（而非回调函数），也会触发警告，需要检查ModalDynamic的实现逻辑。

额外优化建议 #

1. 绑定onGridReady的this：如果你的onGridReady没有在构造函数绑定this，也不是箭头函数，可能导致this.state.gridAPI无法正确赋值，影响导出功能。可以改成箭头函数形式：

onGridReady = (params) => {
  this.setState({ gridAPI: params.api });
}

2. 处理空数组边界：你在标题和导出逻辑里直接访问this.props.selectedHistory[0]，如果数组为空会报错，建议用可选链优化：this.props.selectedHistory?.[0]?.invoice_number

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