Plotly Dash 回调错误：试图隐藏 Div 组件

Question

我试图在点击链接后隐藏输入组件Div。

我已经给出了 Div id='input_fields'，以便我可以隐藏它的子组件，但在 return app1.layout, {'display': 'none'} 上我收到以下错误。

“回调错误更新display-page.children, input_fields.children”

类

app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    html.Br(),
    html.H1("Interpretation of Financial Statements", style={'text-align': 'center'}),
    html.H1("10 year data analysis", style={'text-align': 'center'}),
    html.Div([dcc.Input(id='input-1-state', type='text', placeholder="Enter Company Ticker", value=''),
              dcc.Input(id='input-2-state', type='text', placeholder="Enter Company Name", value=''),
              dcc.Link(' Get Analytics ', href='/apps/app1')], id='input_fields'),
    html.Div(id='display-page'),

], style={"margin-left": "5%", "margin-right": "5%"})


@app.callback(Output('display-page', 'children'),
              Output('input_fields', 'children'),
              [Input('url', 'pathname')],
              Input(component_id='input-1-state', component_property='value'),
              Input(component_id='input-2-state', component_property='value'))
def display_page(pathname, ticker, company):
    if pathname == '/apps/app1':

        # generate links
        linkGenerator.generateLinks(ticker, company)

        # starting crawler
        startingCrawlerClass()

        return app1.layout, {'display': 'none'}
    else:
        return ''

Answer 1

问题在于回调中else 子句的return 语句。您的回调需要两个回调输出，但您返回一个（即单个空字符串）。

如果您在调试模式下运行应用程序，Dash 会告诉您这一点以及它希望您返回的内容：

dash.exceptions.InvalidCallbackReturnValue：回调 ..display-page.children...input_fields.children.. 是一个多输出。 期望输出类型是列表或元组，但得到：''。

所以你可以这样做：

@app.callback(
    Output("display-page", "children"),
    Output("input_fields", "style"),
    [Input("url", "pathname")],
    Input(component_id="input-1-state", component_property="value"),
    Input(component_id="input-2-state", component_property="value"),
)
def display_page(pathname, ticker, company):
    if pathname == "/apps/app1":
        return app1.layout, {"display": "none"}
    else:
        return '', {'display': 'block'}

所以上面的例子返回了一个包含两个元素的元组。每个元素对应一个回调输出。 input-field 的输出也是 style