小编Tyl*_*den的帖子

如何每分钟触发一次 React js 组件的重新渲染?

上下文:
定义了一个钩子并返回一个对象,该对象包含上次修改文件的时间戳。

我计算从时间戳到现在的差异,以向用户显示自他们上次保存以来已经过去了多长时间。

const StageFooter = (props) => {
  const [, , meta] = useMetadata("Tenant Setup Data", "setupData")

  return (
    <StageControls>
      <div id="footer-start"></div>
      <SavingBlock key={meta?.modified}>
        {`Last saved ${
          meta.modified !== undefined ? formatDistanceToNow(meta.modified) : " "
        } ago`}
      </SavingBlock>
      <div id="footer-end"></div>
    </StageControls>
  )
}

export default StageFooter
Run Code Online (Sandbox Code Playgroud)


问题:
从时间戳到现在的计算差异不会实时更新。例如,它会说“上次保存在 10 分钟前”,但过了几分钟后,字符串仍然保持不变。仅当用户导航离开页面然后返回或用户刷新页面时,它才会更新。

考虑到所有这些,我基本上希望每过一分钟就重新渲染组件,以便实时更新值。

谢谢你的时间!

javascript components reactjs react-hooks

6
推荐指数
1
解决办法
2256
查看次数

如何在 AntDesign 的 Table 组件中为溢出的文本添加省略号?

问题: 当使用 AntDesign 的 Table 组件时,我设置了每个单元格的宽度,当文本溢出时,我希望文本被截断并显示省略号。最终目标是当用户将鼠标悬停在省略号上时,让省略号显示带有隐藏文本的工具提示。

这是我当前的代码

<Table
          scroll={{ x: 1500, y: 240 }}
          pagination={false}
          columns={displayFile.headers.map((header) => ({
            title: header.name,
            dataIndex: header.name,
            width: "10rem",
          }))}
          dataSource={displayFile.data.map((row, index) => ({
            ...row,
            rowKey: `${displayFile.name}-row_${index}`,
          }))}
          rowKey={(record: any) => record.rowKey}
        />
Run Code Online (Sandbox Code Playgroud)

任何见解将不胜感激。谢谢你!

html javascript css reactjs antd

4
推荐指数
1
解决办法
1万
查看次数

标签 统计

javascript ×2

reactjs ×2

antd ×1

components ×1

css ×1

html ×1

react-hooks ×1