如何使用 react-table 以編程方式調整列的大小

Question

使用react-table時，您可以指定defaultColumn以將默認列寬設置為

  const defaultColumn = React.useMemo(
    () => ({
      Header: DefaultHeader,
      Cell: DefaultCell,
      width: 200,
    }),
    []
  );

稍后如何以編程方式更改200 ？ 如果我要做

  const defaultColumn = {
      Header: DefaultHeader,
      Cell: DefaultCell,
      width: 200,
    };

然后更新那個200 ，那么它就沒有效果，因為react-table只在初始化時讀取這些值。

Answer 1

由於有一個useMemo掛鈎，您可以使用傳遞給它的依賴項數組。

您可以像這樣定義defaultColumn ：

  const defaultColumn = React.useMemo(
    () => ({
      Header: DefaultHeader,
      Cell: DefaultCell,
      width: colWidth,
    }),
    [colWidth]
  );

其中colWidth是您要傳遞給創建 defaultColumn 的寬度。 現在，當 colWidth 改變時， useMemo將在渲染時創建新的defaultColumn 。

（請注意， colWidth是defaultColumn的同一個 scope 中的一個變量）。