Как устранить ошибку TypeError: компонент `dash_html_components.Div` (версия 1.0.3) с plotly-dash - PullRequest
1 голос
/ 29 мая 2020

Я пытаюсь добавить текст в соответствии с моими графиками, чтобы мой текст было легко понять по результатам графиков. Когда я пытаюсь структурировать первую вкладку, я получаю следующую ошибку:

**TypeError** : The dash_html_components.Divcomponent (version 1.0.3) with the ID "Div(children=(Br(None), P('Select a year and month to query'), Br(None)), id='paragraph1')" detected a Component for a prop other thanchildrenDid you forget to wrap multiplechildren in an array? Prop n_clicks has value Div(children=[Dropdown(id='month', options=[{'label': 'January', 'value': 1}, {'label': 'February', 'value': 2}, {'label': 'March', 'value': 3}, {'label': 'April', 'value': 4}, {'label': 'May', 'value': 5}, {'label': 'June', 'value': 6}, {'label': 'July', 'value': 7}, {'label': 'August', 'value': 8}, {'label': 'September', 'value': 9}, {'label': 'October', 'value': 10}, {'label': 'November', 'value': 11}, {'label': 'December', 'value': 12}], value=3, style={'width': '50%'})], style={'width': '100%', 'display': 'flex', 'flex-direction': 'row'})

А вот часть кода с ошибками:

def tab_layout():

     return html.Div(

            html.Div(

                        id="markdown-container",

                        children=dcc.Markdown(

                            children=(

                                """

                                    my text text

                                    ### Funnel Area Chat

                                    more text more text more text

                    """

                            ), 

                            style={"color": "white"}

                        ),

                    ),



            html.Div(

                id="paragraph1",

                children= (

                    html.Br(),

                    html.P("Select a year and month to query"),

                    html.Br()



                )



            ),



             html.Div([

                dcc.Dropdown(

                    id="month",

                    options= month_options(),

                    value=3,

                    style={"width": "50%"}

                    ),

                    ], style={"width": "100%", "display": "flex", "flex-direction": "row"}),

                 dcc.Dropdown(

                     id="year",

                     options=[

                         {"label": "2019", "value": 2019},

                         {"label": "2020", "value": 2020}

                     ],

                     value=2020,

                     style={"width": "50%", "display": "flex", "flex-direction": "row", 

                            "justify-content": "left"}

                     ),

            html.Div([

                dcc.Graph(id="funnel_plot",

                          config= {

                              "displaylogo": False,

                              "toImageButtonOptions": {"width": None, "height": None}

                          }



                        )

                ], style={"width": "100%", "display": "inline-block"})

                )

Что может быть не так? Компилятор не видит ошибок? Я пишу, чтобы разобраться в этом, не понимая.

Спасибо за помощь!

1 Ответ

2 голосов
/ 29 мая 2020

Когда вы включаете несколько элементов в свойство children элемента html.Div(), вам необходимо убедиться, что они заключены в квадратные скобки, поскольку свойство children элемента html.Div() является списком (см. Da sh документация ). Ниже я привел пример на основе вашего кода.

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objects as go

app = dash.Dash()

app.layout = html.Div(children=[

    html.Div(children=[

        html.Div(

            id="markdown-container",

            children=dcc.Markdown(

                children="""

                        my text text

                        ### Funnel Area Chat

                        more text more text more text

                    """,

                style={"color": "white"}

            ),

        ),

        html.Div(

            id="paragraph1",

            children=[

                html.Br(),

                html.P("Select a year and month to query"),

                html.Br()

            ]

        ),

        html.Div(children=[

            dcc.Dropdown(

                id="month",

                value=3,

                style={"width": "50%"}

            ),

        ], style={"width": "100%", "display": "flex", "flex-direction": "row"}),

        dcc.Dropdown(

            id="year",

            options=[

                {"label": "2019", "value": 2019},

                {"label": "2020", "value": 2020}

            ],

            value=2020,

            style={"width": "50%", "display": "flex", "flex-direction": "row",

                   "justify-content": "left"}

        ),

        html.Div(children=[

            dcc.Graph(id="funnel_plot",

                      config={

                          "displaylogo": False,

                          "toImageButtonOptions": {"width": None, "height": None}

                      }

            ),

        ], style={"width": "100%", "display": "inline-block"}),

    ])

])

app.run_server(debug=False)
...