Plotly Dash：如何使用 for 循环生成 html 组件？

Question

我想通过将字符串列表传递给生成这些按钮的构造函数来创建多个 dbc.Button，方法如下：


# -*- coding: utf-8 -*-
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_table
import plotly.express as px

from functools import lru_cache

import dash_bootstrap_components as dbc


from dash.dependencies import Input
from dash.dependencies import Output
from dash.dependencies import State

import pandas as pd

data = {'teams': ['team1', 'team2', 'team3', 'team4']}
df_teams = pd.DataFrame(data)

def generate_team_button(team_shortName):
    return dbc.Button(
                str(team_shortName),
                color="primary", 
                className="mr-1",
                id=str(team_shortName),

            ),


external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']



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

colors = {
    'background': '#111111',
    'text': '#7FDBFF'
}

app.layout = html.Div(
    [

        dbc.Row([
            dbc.Col(
               [generate_team_button(i) for i in df_teams.iterrows()]
            ) 
        ]),

    ],
)


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

但是我在尝试执行上述操作时收到所有生成的按钮的以下错误：


The children property of a component is a list of lists, 
instead of just a list. Check the component that has the 
following contents, and remove one of the levels of nesting: 
[
  {
    "props": {
      "children": "(0, 0    team1\nName: 0, dtype: object)",
      "id": "(0, 0    team1\nName: 0, dtype: object)",
      "className": "mr-1",
      "color": "primary"
    },
    "type": "Button",
    "namespace": "dash_bootstrap_components"
  }
]

我需要做什么才能生成按钮？

Answer 1

您的代码中有一个小错误，如果您删除 generate_team_button() 函数后的逗号，您将不会再收到错误。您可能还想用 df_teams['teams'] 替换 df_teams.iterrows()，请参见下面的示例。

import dash
import dash_html_components as html
import dash_bootstrap_components as dbc
import pandas as pd

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

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

data = {'teams': ['team1', 'team2', 'team3', 'team4']}
df_teams = pd.DataFrame(data)

def generate_team_button(team_shortName):

    return dbc.Button(children=str(team_shortName),
                      color="primary",
                      className="mr-1",
                      id=str(team_shortName))


app.layout = html.Div([

        dbc.Row([

            dbc.Col(children=[generate_team_button(i) for i in df_teams['teams']])

        ])

])

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

Plotly Dash：如何使用 for 循环生成 html 组件？

Plotly Dash: How to generate html components with a for loop?

python

plotly-dash