python - Dash Python html 中的“子项”属性

Question

我对“ child ”在 Dash html 中所做的事情感到很困惑。为什么它甚至存在？你为什么要用它？我尝试阅读文档，但帮助不大。

引用下面的代码块:

• children 属性甚至在第一行做什么？
• 你不能用情节中的“人物”之类的东西代替 child 吗？

代码块:

app.layout = html.Div(children=[
    # TODO1: Add title to the dashboard
    html.H1("Airline Dashboard by CK", style = {'text-align':'center'}),
    # REVIEW2: Dropdown creation
    # Create an outer division
    html.Div([
        # Add an division
        html.Div([
            # Create an division for adding dropdown helper text for report type
            html.Div(
                [
                    html.H2('Report Type:', style={'margin-right': '2em'}),
                ]
            ),
            # TODO2: Add a dropdown
                dcc.Dropdown(id = 'input-type',
                    options = [{'label':'Yearly Airline Performance Report', 'value': 'OPT1'},
                    {'label':'Yearly Average Flight Delay Statistics', 'value': 'OPT2'}],
                    multi = False,
                    placeholder = 'Select a Report Type',
                    style={'width': '80%', 'padding': '3px', 'font-size': '20px', 'text-align-last': 'center'}
            )
            # Place them next to each other using the division style
        ], style={'display': 'flex'}),

        # Add next division
        html.Div([
            # Create an division for adding dropdown helper text for choosing year
            html.Div(
                [
                    html.H2('Choose Year:', style={'margin-right': '2em'})
                ]
            ),
            dcc.Dropdown(id='input-year',
                         # Update dropdown values using list comphrehension
                         options=[{'label': i, 'value': i} for i in year_list],
                         placeholder="Select a year",
                         style={'width': '80%', 'padding': '3px', 'font-size': '20px', 'text-align-last': 'center'}),
            # Place them next to each other using the division style
        ], style={'display': 'flex'}),
    ]),

    # Add Computed graphs
    # REVIEW3: Observe how we add an empty division and providing an id that will be updated during callback
    html.Div([], id='plot1'),

    html.Div([
        html.Div([], id='plot2'),
        html.Div([], id='plot3')
    ], style={'display': 'flex'}),

    # TODO3: Add a division with two empty divisions inside. See above disvision for example.
    html.Div([
        html.Div([], id='plot4'),
        html.Div([], id='plot5')
    ], style = {'display':'flex'})
])


# Callback function definition
# TODO4: Add 5 ouput components
@app.callback(
              [Input(component_id='input-type', component_property='value'),
               Input(component_id='input-year', component_property='value')],
              # REVIEW4: Holding output state till user enters all the form information. In this case, it will be chart type and year
              [Output("plot1", 'children'), Output("plot2", "children"),
               Output("plot3", "children"), Output("plot4", "children"),
               Output("plot5", "children")
               ])

Answer 1

来自 this page文档的:

5. The children property is special. By convention, it's always the first attribute which means that you can omit it: html.H1(children='Hello Dash') is the same as html.H1('Hello Dash'). Also, it can contain a string, a number, a single component, or a list of components.

一些组件，例如 html.Div 和 html.P，接受它们的 children 属性的值。其他的，例如 dcc.Graph 或 dcc.Dropdown 则不需要，并且需要其他 Prop 才能正常运行。

正如@KarlKnechtel 在他的评论中提到的，当一个组件是另一个组件的子组件时，它表示第一个组件嵌套在另一个组件中。以下是类似的:

在破折号中:

html.Div(
    children=[
        html.H1('This is some text'),
        html.P('This is also some text'),
    ]
)

在 HTML 中:

<div>
  <h1>This is some text</h1>
  <p>This is also some text</p>
</div>

我希望这能回答您的问题。

编辑:

在 children 之后添加 style 到此 html.Div 将允许您更改 Div 的样式，这可能会影响嵌套在其中的组件的样式，但这不是 children Prop 的目的。正如文档中提到的，您可以显式设置 children= 任何内容，或者您​​可以首先传递相同的值，没有显式关键字参数，Dash 会将其视为 children Prop 。无论哪种方式，在幕后，组件仍在接收其 children 属性的值。

children 属性的目的是允许用户嵌套组件，就像我们在原始 HTML 中所做的那样。如果没有 children 属性，就不可能通过将相关项目包含在同一父元素中来将它们组合在一起(例如，将导航项目放在顶部导航栏中)。