更新 defaultColumnDefs 不会重新呈现网格

Question

我试图添加一个在网格中切换排序的按钮，当我单击该按钮时，控制台会记录可排序已切换但网格从未呈现的 defaultColumnDefs。

import React, { useState } from 'react';
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';
function App() {

const [sort, setSort] = useState(false);

const [rowData] = useState([
  { make: 'Toyota', model: 'Celica', price: 35000 },
  { make: 'Ford', model: 'Mondeo', price: 32000 },
  { make: 'Porsche', model: 'Boxter', price: 72000 },
]);

const [columnDefs] = useState([
  { field: 'make' },
  { field: 'model' },
  { field: 'price' },
]);

const [defaultColDef, setDefaultColDef] = useState({
  sortable: sort,
});

const sortHandler = () => {
  setDefaultColDef({ ...defaultColDef, sortable: !sort });
  setSort(prev => !prev);
};

console.log(defaultColDef);

return (
  <div>
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
      <AgGridReact
        columnDefs={columnDefs}
        defaultColDef={defaultColDef}
        rowData={rowData}
      ></AgGridReact>
    </div>
    <button onClick={sortHandler}> {sort ? 'No sort' : 'Sort'} </button>
  </div>
);
}

export default App;

可能出了什么问题？

Answer 1

sort 属性是有状态的，这意味着您可以更改它们而无需更新列定义。为此，您可以调用 columnApi 方法 applyColumnState()

请参阅有关 列状态

这是一个 动态更改排序的示例 网格的