防止在 plotly dash 中动态添加的组件执行回调

Question

我开发了一个多页面的 Plotly Dash 应用程序。在我的应用程序中，许多 UI 组件是动态创建的。根据 Dash 文档，可以通过为特定回调设置

prevent_initial_call=True

来防止在首次加载应用程序时执行回调。但是，这仅在所有输入和输出组件都存在于主应用程序布局中时才有效。动态创建输入/输出组件时，

prevent_initial_call

参数不起作用，组件一创建就触发回调。这会使 Dash 应用变慢，因为在动态创建组件时会触发许多回调。

是否有解决方法来防止在创建动态添加的组件时触发这些回调？

Answer 1

我认为当您动态返回包含具有在其他回调中使用的 id 的组件的标记时，不可能阻止回调被触发。

我可以想到两种方法来解决这个问题。

第一种方法

第一种方法是在你的回调中使用

raise PreventUpdate

这样你就可以在某些情况下防止不必要的更新。

文档中的示例：

app.layout = html.Div([
    html.Button('Click here to see the content', id='show-secret'),
    html.Div(id='body-div')
])

@app.callback(
    Output(component_id='body-div', component_property='children'),
    Input(component_id='show-secret', component_property='n_clicks')
)
def update_output(n_clicks):
    if n_clicks is None:
        raise PreventUpdate
    else:
        return "Elephants are the only animal that can't jump"

在上面的示例中，

show-secret

按钮的

value

属性隐式设置为

None

。回调不使用

prevent_initial_call=True

所以它会立即运行，但它使用

n_clicks

是

None

的事实来确定按钮之前没有被点击过。

您可以在自己的回调中使用相同的原则。根据输入的（默认）值，您可以决定是否需要运行回调中的其余代码。

第二种方法

您可以将页面的标记放在布局中，但使用 css 根据 url 隐藏您不想显示的页面（例如使用

display: none

）。如果您采用这种方法，则可以防止触发回调。这样做的缺点是页面在布局中，您可能不希望这样。