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

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

react-table reactjs javascript

tic · 技术社区 · 4 年前

使用时 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 回复 | 直到 4 年前

SomoKRoceS 4 年前

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

你可以定义 defaultColumn 这样地:

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

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

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

3 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

3 月前

Alex · 在轻量级中同时解构和不解构变量

4 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

4 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

4 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

4 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

4 月前

user3472810 · Angular@Output/EventEmitter返回undefined

4 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

4 月前