Plotly Dash 选项卡内嵌Dropdown组件回调ID不存在报错如何解决

• Dash启动时会默认校验所有回调绑定的输入、输出组件是否存在于初始加载的布局中，你代码中的my-input（下拉框）、my-output（输出容器）仅在切换到Tab2时才会被动态渲染到页面，初始加载时布局中没有对应id的组件，因此触发校验错误。
• 另外你第二个回调的输出属性配置错误：my-output是html.Div组件，没有figure属性，后续即使解决组件不存在的问题也会触发属性错误，需要改为children。

最简单的方案是关闭Dash的回调存在性校验，在初始化Dash实例时添加参数suppress_callback_exceptions=True即可，同时修正回调的输出属性。

import dash
from dash import html
from dash import dcc
from dash.dependencies import Input, Output

# 加suppress_callback_exceptions参数关闭回调组件存在性校验
app = dash.Dash(__name__, suppress_callback_exceptions=True)

tab1 = html.Div([
    html.H3('Tab 1'),
])

tab2 = html.Div([
    html.H3('Tab 2'),
    dcc.Dropdown(
        id='my-input',
        options=[
            {'label': 'label_first', 'value': 'first'},
            {'label': 'label_second', 'value': 'second'},
        ],
        value='first'
    ),
    html.Div(id='my-output'),
])

app.layout = html.Div([
    html.H1('Dash Tabs component demo'),
    dcc.Tabs(id="tabs", value='1', children=[
        dcc.Tab(label='Overview', value='1'),
        dcc.Tab(label='Tab Two', value='2'),
    ]),
    html.Div(id='tab-output')
])

@app.callback(
    Output('tab-output', 'children'),
    Input('tabs', 'value'))
def render_content(tab):
    if tab == '1':
        return tab1
    elif tab == '2':
        return tab2

# 把输出属性从figure改成children
@app.callback(
    Output('my-output', 'children'),
    Input('my-input', 'value'))
def update_div(input_value):
    return f'Output: {input_value}'
   
if __name__ == "__main__":
    app.run_server(debug=True)

内容的提问来源于stack exchange，提问作者Raphael