【问题标题】:React Virtualized - onclick, expand Rows for additional detailsReact Virtualized - onclick,展开行以获取更多详细信息
【发布时间】:2017-04-27 14:19:44
【问题描述】:

我需要打开/关闭其他行详细信息。

有没有人实现或有关于如何为每一行实现展开/折叠功能的想法?

【问题讨论】:

  • 我正在尝试做同样的事情。你是怎么设置的?你用过手风琴库吗?

标签: reactjs react-virtualized


【解决方案1】:

我一直在寻找相同的功能,但在搜索时没有找到一些有用的结果,也许这个沙盒可以帮助其他人在他们的应用中寻找类似的功能:

该示例使用Table 中的react-virtualized 旁边的react hooks

Example

【讨论】:

  • 这里有一个巨大的帮助......你是一个救生员!
【解决方案2】:

为了它的价值...... :-)

CodeSandbox sample

【讨论】:

    【解决方案3】:

    这类事情有一个模板(demosource)重要的是你需要告诉你的List/Grid/无论何时打开/关闭发生了变化(也就是大小可能发生变化时),例如:

    this._listRef.recomputeRowHeights(indexOfChangedRow) // Clear cached size
    this._listRef.forceUpdateGrid() // Rerender list with new size
    

    【讨论】:

    • 谢谢,我可以通过自定义 RowRenderer 文件以及您的演示和建议来完成这项工作。非常感谢!
    • @brianvaughn 感谢您的回答,但我无法在虚拟化网格上实现此解决方案,网格没有 recomputeRowHeights 方法
    • 请阅读文档。 Grid 定义了一个类似的方法,名为 cellRangeRenderergithub.com/bvaughn/react-virtualized/blob/master/docs/Grid.md
    • 复活这个旧线程。 @bvaughn 如果我理解正确,您提供的示例不支持嵌套项目的虚拟化,对吗?我的意思是如果有很多子项,那么如果父项可见,它们都会被添加到 DOM 中。是否有更好的方法来支持子项目中的虚拟化?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多