Plotly Dash：根据选项卡中的下拉菜单生成输出

Question

我创建了以下代码，以根据选项卡中的下拉菜单生成输出。但是，代码不起作用并产生以下错误：

Attempting to connect a callback Input item to component: "my-input" but no components with that id exist in the layout.

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

app = dash.Dash(__name__)

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

@app.callback(
    Output('my-output', 'figure'),
    Input('my-input', 'value'))
def update_div(input_value):
    return f'Output: {input_value}'
   
if __name__ == "__main__":
    app.run_server(debug=True)

Answer 1

无需为基于所选选项卡呈现选项卡内容定义回调，您只需将选项卡布局（tab1 和tab2）作为children 传递给每个dcc.Tab。另请注意，带有id='my-output' 的组件是html.Div，而不是dcc.Graph，因此它没有figure 属性。一旦这些问题得到解决，错误就会消失。

import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output

app = dash.Dash(__name__)

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',
            children=tab1
        ),
        dcc.Tab(
            label='Tab Two',
            value='2',
            children=tab2
        ),
    ]),
])

@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, host='127.0.0.1')

Answer 2

在dash中，回调函数被调用了3次，你可以从dash的官方文档中看到。但是为了您的信息，dash 中的每个回调函数也被调用，我们第一次渲染页面。在这里，当第一次调用def update_div(input_value) 回调时，tab2 不会在屏幕上呈现。我的意思是屏幕上没有 tab2 的对象。因此，当父对象不存在于屏幕上时，其意思是，屏幕上不存在子对象。所以，这就是你得到错误的原因。 这是您的问题的另一种解决方案。

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

app = dash.Dash(__name__)

tab1 = html.Div(id='tab1',style={'display':'block'},children=[
    html.H3('Tab 1'),
])

tab2 = html.Div(id='tab2',style={'display':'none'}, children=[
    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='table_content',children=[tab1,tab2]),
])


@app.callback(
    [Output('tab1', 'style'),
     Output('tab2', 'style')],
    Input('tabs', 'value'))
def render_content(tab):
    show = {'display': 'block'}
    hide = {'display':'none'}
    if tab == '1':
        return show, hide
    elif tab == '2':
        return hide, show


@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)