Dash：如何更新回调中的数百个元素？

Posted 2023-03-22

【中文标题】Dash：如何更新回调中的数百个元素？

【英文标题】：Dash: How to update hundreds of elements in callback?

【发布时间】：2020-10-17 18:21:44

【问题描述】：

在我的 Dash 应用程序中，我有多个 html.Div 组件（都具有几乎相同的外观和布局）。现在，当我点击一个复选框时，我想隐藏所有这些元素。 每个人都提出的解决方案是你有多个输出，并分别处理每个 id（见下面的代码）。问题是，我想隐藏大约 50 个这样的 Div，但我没有给它们一个不同的 ID。如果我按照此处代码中的方式进行操作，则必须有很多输出（大约 50 个），并且每次添加新输出时，都必须手动添加。

@app.callback(
    [Output(component_id='div-of-interest-1', component_property='style'),
     Output(component_id='div-of-interest-2', component_property='style'),
     .......]
    [Input(component_id='hide-checkbox', component_property='value')]
)
def hide_div(checked):
    if checked == 'True':
        return 'display': 'none'
    else:
        return 'display': 'block'

那么，有没有聪明的方法来解决这个问题？最简单的方法（但不允许）是为我想要隐藏的所有 div 使用相同的 id。但这在 Dash 中是被禁止的。 Html 中是否有类似的东西，以便我可以一次解决所有感兴趣的元素？

【问题讨论】：

您能否以编程方式生成 Div 组件的列表，以便您可以以编程方式为每个组件分配一个 ID。然后，您也可以通过编程方式为您的回调生成输入列表。

感谢您的回答。不幸的是，在当前架构中这实际上是不可能的。这将需要一些hacky代码才能使其工作。 html中没有“标签”之类的东西吗？

【参考方案1】：

根据 Div 的内容，您可以通过编程方式生成一个 Div 组件列表，以便您可以通过编程方式为每个组件分配一个 id。例如

divs = [html.Div(id=f"div_i" <...> ) for i, x in enumerate(list_of_div_contents)]

这些 html.Div 对象可能都是布局中其他 Div 的子对象：

html.Div(id="div_parent", children=divs)

您的回调可能会将div_parent 的子代设置为None。