Plotly Dash：如何解决错误 dash_html_components.Div 检测到除子项以外的道具的组件
Posted
技术标签:
【中文标题】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 【发布时间】：2020-09-16 21:48:50 【问题描述】：我正在尝试根据我的情节添加文本，以便我的文本易于理解情节的结果。当我尝试构建第一个选项卡时，出现以下错误：
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】：当您在html.Div() 的children 属性中包含多个元素时，您需要确保将它们括在方括号中，因为html.Div() 的children 属性是一个列表（请参阅@ 987654321@).
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)
【讨论】：
以上是关于Plotly Dash：如何解决错误 dash_html_components.Div 检测到除子项以外的道具的组件的主要内容，如果未能解决你的问题，请参考以下文章
Plotly Dash：如何在 html.Img 上方添加标题？
Dash Plotly Graph（Dash 核心组件抛出错误）
Dash Plotly 如何修复“所有参数应具有相同的长度。x 和 y”
如何为下拉菜单修复 plotly-dash 中的“回调错误”