Plotly Dash：如何解决错误 dash_html_components.Div 检测到除儿童以外的道具的组件
Plotly Dash: How to resolve the error dash_html_components.Div detected a component for a prop other than children
我正在尝试添加与我的图表一致的文本，以便我的文本易于理解图表的结果。当我尝试构建第一个选项卡时，出现以下错误：
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"})
)
有什么问题吗？编译器没有看到任何错误？
当您在 html.Div() 的 children 属性 中包含多个元素时，您需要确保将它们括在方括号中，因为 children 属性 的 html.Div() 是一个列表（参见 documentation）。
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)
我正在尝试添加与我的图表一致的文本，以便我的文本易于理解图表的结果。当我尝试构建第一个选项卡时，出现以下错误：
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"})
)
有什么问题吗？编译器没有看到任何错误？
当您在 html.Div() 的 children 属性 中包含多个元素时，您需要确保将它们括在方括号中，因为 children 属性 的 html.Div() 是一个列表（参见 documentation）。
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)