代码之家 › 专栏 › 技术社区 › tic

如何使用react table以编程方式调整列的大小

react-table reactjs javascript

0

tic · 技术社区 · 6 年前

使用时 react-table ,您可以指定 defaultColumn 将默认列宽指定为

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

我如何通过编程来改变这一点 200 过一会儿?如果我要这么做

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

稍后再更新 ,那么它就没有效果了,就像 react-table 仅在初始化时读取这些值。

0 回复 | 直到 6 年前

1

0

SomoKRoceS 6 年前

因为有一个 useMemo 钩子,您可以使用传递给它的依赖项数组。

你可以定义 defaultColumn 这样地:

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

哪里 colWidth 要传递给defaultColumn创建的宽度。现在,当colWidth改变时, 使用备忘录 将创建新的 默认列 正在渲染。

(注意 colWidth 是同一范围内的变量 默认列 ).