Python Dash根据输入数值动态渲染Tabs组件的实现问题

核心实现逻辑 #

你推测的用循环实现是正确的，只需要把固定写死的dcc.Tab组件列表，替换为根据输入数字动态生成的列表即可，同时要补充输入校验处理边界场景。

完整可运行代码 #

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

# 补充缺失的全局样式定义
CONTENT_STYLE = {'padding': '20px'}

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

input_group_Row = dbc.Row([ 
    dbc.Col([        
        dbc.CardBody(
            [
                dbc.InputGroup(
                [
                    dbc.InputGroupAddon("Enter number", addon_type="prepend"),
                    dbc.Input(id='integer',placeholder="Enter int", type='number'),
                ],className="mb-3",),
            ]),
    ]),     
    dbc.Col([
        dbc.Button('Enter', color='primary',id='load', block=True,n_clicks=0),
    ]) 
])
app.layout = html.Div([input_group_Row, html.Div(id='output-content')], style = CONTENT_STYLE)

@app.callback(Output('output-content', 'children'),
              [Input('load', 'n_clicks')],
              [State('integer','value')],
              )
def render_tabs(click1, integ):
    # 初始加载不触发渲染
    if click1 == 0:
        return ""
    # 输入合法性校验
    if not integ:
        return html.P("请输入有效的正整数", style={'color': 'red'})
    n = int(integ)
    # 列表推导式动态生成对应数量的Tab
    tab_list = [
        dcc.Tab(
            label=f'Tab {i}', 
            value=f'tab{i}', 
            children=[html.Div(str(i), style={'color': 'blue', 'fontSize': 140})]
        ) for i in range(1, n+1)
    ]
    return dcc.Tabs(id='tab', value='tab1', children=tab_list)

if __name__ == '__main__':
    app.run_server(debug=True)

关键修改说明 #

• 补充了缺失的CONTENT_STYLE全局样式定义，同时给输入框指定了type='number'限制只能输入数字，降低非法输入概率
• 增加了初始加载、空输入的校验逻辑，避免页面报错
• 用列表推导式替代固定的Tab列表，输入N就生成N个Tab，每个Tab的标签、值、内容都自动对应编号
• 补充了程序入口的运行代码，直接执行即可启动服务测试

内容的提问来源于stack exchange，提问作者A.G