reactjs - 如何在 Material ui 数据网格中保存列可见性状态

Question

我有一个相当简单的数据网格表，可以选择隐藏/显示特定列。
我想在发生重新渲染时保存列的状态(在我的情况下，当语言发生变化时)。
这是一个精简的样本。只需隐藏一列，然后单击按钮。列标题按预期更改，但隐藏的列重新出现。
https://codesandbox.io/s/material-demo-forked-lq22m
我想我必须将 hide 属性正确设置为单击处理程序中列的当前状态:

 const handleButtonClick = () => {
    setColumnState((c) => c.map((d) => ({ ...d, hide:currentStateofHideForEachCol, headerName: "nombre" })));
  };

但我找不到访问它的方法。

Answer 1

目前，通过更新 columnState您正在强制重新渲染新网格而不是更新当前网格，从而丢失状态。
我换了你的code behavior所以它现在使用 GridColDef.renderHeader和 React.useContext在不丢失网格状态的情况下根据语言更改列名称。
在保存网格状态方面，网格的整个状态是不可控的，很难做到，尤其是列的可见性不可访问。但是，可以控制其他 Prop (排序、过滤和选择模型)。例如，您可以控制 page支柱:

// This mimics the default page change behavior 
const [currentPage, setCurrentPage] = useState(1);
const handleChangePage = useCallback(
 (gridPageChangeParams)=> setCurrentPage(gridPageChangeParams.page),
  []
);
<DataGrid page ={currentPage} onPageChange={handleChangePage}