ReactJS点击按钮动态添加colDefs列定义的实现方法咨询

你用的应该是AG Grid表格组件吧？核心思路是把列定义存在React的state中，点击按钮时更新state即可实现动态新增列，具体实现如下：

前置修正 #

你给出的列定义存在语法错误，先调整为正确格式：

const newColumn = {
  headerName: "Product1",
  resizable: true,
  wrapText: true,
  cellStyle: {
    'white-space': 'normal'
  },
  autoHeight: true,
  hide: true,
  cellRendererFramework: MyCustomColumnRenderer // 修正原语法错误，把点改为冒号
}

完整实现代码 #

import { useState } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
// 引入你的自定义渲染组件
import MyCustomColumnRenderer from './MyCustomColumnRenderer';

const MyGridPage = () => {
  // 初始化原始列定义，存在state中
  const [columnDefs, setColumnDefs] = useState([
    // 这里放你原本硬编码的固定列，示例如下可自行替换
    { headerName: 'ID', field: 'id' },
    { headerName: '产品名称', field: 'productName' }
  ]);
  const [rowData, setRowData] = useState([
    // 你的表格行数据，示例如下可自行替换
    { id: 1, productName: '测试产品1' },
    { id: 2, productName: '测试产品2' }
  ]);

  // 点击按钮新增列的处理函数
  const handleAddColumn = () => {
    const newColumn = {
      headerName: "Product1",
      resizable: true,
      wrapText: true,
      cellStyle: {
        'white-space': 'normal'
      },
      autoHeight: true,
      hide: true,
      cellRendererFramework: MyCustomColumnRenderer
    };
    // 示例是把新列加在列的最后面，如果你需要把新列加在指定位置，修改数组拼接逻辑即可
    // 加在最前面可以写成：setColumnDefs(prev => [newColumn, ...prev])
    setColumnDefs(prev => [...prev, newColumn]);
  };

  return (
    <div>
      <button onClick={handleAddColumn}>新增Product1列</button>
      <div className="ag-theme-alpine" style={{ height: 400, width: '100%' }}>
        <AgGridReact
          columnDefs={columnDefs}
          rowData={rowData}
          // 其他AG Grid配置项可自行补充
        />
      </div>
    </div>
  );
};

export default MyGridPage;

扩展说明 #

• 如果需要多次点击新增不同列，可给headerName加动态后缀（比如用计数器拼接），避免列名重复
• 如果需要调整新增列的显示状态，修改列配置中的hide属性即可，也可以后续通过AG Grid的列API动态切换显隐
• 如果你用的不是AG Grid，而是其他表格组件（比如Ant Design的Table），逻辑完全一致：把columns配置存在state中，点击按钮更新state即可

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