Python全栈应用开发利器Dash 3.x新版本介绍（4）-CSDN博客

更多Dash应用开发干货知识、案例，欢迎关注“玩转Dash”微信公众号👇

大家好我是费老师，在前几期文章中，我们针对Python生态中强大且灵活的全栈应用开发框架Dash，介绍了其3.x新版本中众多的新功能及特性：

而今天的文章中，我们将继续介绍Dash3.x新版本中，针对浏览器端回调等更进阶的应用场景，新增的一些实用方法，从而进一步提升Dash应用开发的灵活性🥳。

针对浏览器端环境新增dash_component_api模块#

新版本Dash，在应用运行的浏览器端环境中，新增了dash_component_api模块，可以通过window.dash_component_api或直接的dash_component_api进行引用，以浏览器开发者工具为例：

对于常规的Dash应用开发者，日常主要可以用到其中的getLayout()和stringifyId()方法：

使用getLayout()方法自由获取组件信息#

我们先来学习3.x版本中新增的dash_component_api.getLayout()方法，只需要将目标组件的id作为参数传入，即可获得完整的目标组件信息，以下面的简单应用为例：

import dash
from dash import html
import feffery_antd_components as fac
from feffery_dash_utils.style_utils import style

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        fac.AntdSpace(
            [
                fac.AntdButton("测试按钮1", id="test-button1", type="primary"),
                fac.AntdButton("测试按钮2", id="test-button2"),
                fac.AntdAlert(
                    id="test-alert",
                    message="提示信息示例",
                    description="描述信息示例",
                    showIcon=True,
                    action=fac.AntdButton("测试按钮3", type="primary", size="small"),
                ),
            ],
            direction="vertical",
            style=style(width="100%"),
        ),
    ],
    style=style(padding=50),
)

if __name__ == "__main__":
    app.run(debug=True)

为了方便演示，下面我们都直接在浏览器开发者工具/控制台中举例演示，首先以测试按钮1为例，直接调用getLayout()方法传入其id属性，即可获得对应组件的全部信息，其中props字段具体记录了组件当前的相关属性值：

并且任何时候调用getLayout()，所获得的组件信息都是最新的，譬如我们点击测试按钮1几次后再次调用，可以看到props字段中对应的累计点击次数nClicks属性值：

且对于嵌套形式的组件，props属性中对应的字段，也会完整的记录所嵌套组件信息，譬如测试按钮3是通过警告提示组件AntdAlert的组件型参数action传入的，调用getLayout()获取警告提示组件的信息后，可以看到测试按钮3相关的最新完整信息：

基于新方法getLayout()，我们就可以在浏览器环境中，随时随地随心所欲地获取任何组件的任何信息，对于擅长在Dash应用中编写浏览器端回调函数的朋友，这个新方法大幅提升了在Dash应用中集成javascript实现进阶拓展功能的自由度😎~

使用stringifyId()方法正确转换字典型id#

我们都知道Dash应用中，组件的id除了常规的字符型以外，还支持传入字典型，这在模式匹配回调等进阶场景中非常实用。

但在Dash运行的浏览器端环境中，如果要针对这些字典型id目标元素进行定位，直接将原始的字典型id转字符串是行不通的，譬如下面的简单例子：

import dash
from dash import html
import feffery_antd_components as fac
from feffery_dash_utils.style_utils import style

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        fac.AntdSpace(
            [
                fac.AntdButton(
                    "测试按钮1", id={"type": "test-button", "index": 1}, type="primary"
                )
            ],
            direction="vertical",
            style=style(width="100%"),
        ),
    ],
    style=style(padding=50),
)

if __name__ == "__main__":
    app.run(debug=True)