Dash 输入、输出组件属性

Question

参考文档 link 如下：-

在文档中，component_property 对于 Input & Output callback 的解释是：-

In Dash, the inputs and outputs of our application are simply the properties of a particular component. In this example, our input is the "value" property of the component that has the ID "my-input". Our output is the "children" property of the component with the ID "my-output

但是在下面复制的示例代码中，我无法在 html 骨架中找到 value 或 children 的 component_property。从文档中注意到省略了 children。

问：我怎么知道我是否必须指定 value 、 children 或其他一些 component_property？

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

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

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
    html.H6("Change the value in the text box to see callbacks in action!"),
    html.Div(["Input: ",
              dcc.Input(id='my-input', value='initial value', type='text')]),
    html.Br(),
    html.Div(id='my-output'),

])


@app.callback(
    Output(component_id='my-output', component_property='children'),
    Input(component_id='my-input', component_property='value')
)
def update_output_div(input_value):
    return 'Output: {}'.format(input_value)


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

Answer 1

如果您想知道在使用某个组件时是否必须明确指定 component_property，您将不得不查看该组件的文档。它应该告诉您哪些属性是必需的，哪些是可选的。

对于大多数组件，大部分属性都是可选的。例如，查看 html.Div here 的文档。遗憾的是，这个例子还表明文档并不总是完整的，因为属性 n_clicks 和 n_clicks_timestamp 也是可选的，但目前还没有列出。这使得 html.Div 的所有属性都是可选的。

在实践中，您通常只会明确列出要设置为某个初始值的属性。如果您遗漏了任何必填项，Dash 将抛出异常。

请注意，您可以使用任何属性作为回调的 Input / Output / State，无论它们是否可选。即使您没有明确命名它们，它们也会以一些默认值存在。

关于你举的例子，component_property value其实是在这一行明确给出的，你可能忽略了：

dcc.Input(id='my-input', value='initial value', type='text')]),

这是 dcc.Input 的第二个参数。 Output组件的children属性在布局中确实没有明确给出。我添加了两个工作替代方案，包括在下面：

html.Div(id='my-output'),                # from the given example
# html.Div(children=[], id='my-output'), # explicitly give children property
# html.Div([], id='my-output'),          # name of the children argument may be dropped if it goes first

请注意第三种方式也是如何在您的示例中的其他两个 html.Div 中使用的方式。

Dash 输入、输出组件属性

Dash Input, Output Component Property

python

plotly-dash

Dash 输入、输出组​​件 属性

Dash Input, Output Component Property

python

plotly-dash

Dash 输入、输出组件属性