如何将Python变量传递给Plotly Dash的clientside_callback客户端回调

可以直接将Python侧定义的静态变量传入客户端回调，有两种常用的实现方式：

方法1：Python层直接格式化注入JS脚本 #

如果你的python_variable是页面加载阶段就固定的静态值，直接用Python字符串格式化把变量值写入客户端回调的JS代码即可，示例代码如下：

import json

python_variable = 'string or some variable'

app.clientside_callback(
    f"""
    function(n_clicks, user_input) {{
        if (n_clicks){{
            alert(user_input + {json.dumps(python_variable)});
        }}
    }}
    """,
    Output('dummy_div', 'children'),
    [Input('btn', 'n_clicks'),
     Input('user_input', 'value')]
)

注意事项：

• 用f-string时JS代码里的大括号需要写双份{{/}}转义，避免被Python识别为格式化占位符
• 用json.dumps()处理Python变量，不管是字符串、数字、列表、字典类型都可以正确转换为JS可识别的语法，不会出现类型错误

方法2：初始化dcc.Store直接赋值（无需额外回调） #

不需要写专门的回调存静态变量，直接在定义dcc.Store组件时把值写入data属性即可，初始化阶段就会自动把值传到前端，客户端回调直接把这个Store作为State读取即可：
首先在布局中添加Store组件：

from dash import dcc, html

python_variable = 'string or some variable'

app.layout = html.Div([
    # 其他原有组件
    dcc.Store(id='static-var-store', data=python_variable),
    html.Button('触发按钮', id='btn'),
    dcc.Input(id='user_input', value=''),
    html.Div(id='dummy_div')
])

修改客户端回调引入该Store作为参数：

app.clientside_callback(
    """
    function(n_clicks, user_input, static_var) {
        if (n_clicks){
            alert(user_input + static_var);
        }
    }
    """,
    Output('dummy_div', 'children'),
    [Input('btn', 'n_clicks'),
     Input('user_input', 'value')],
    [State('static-var-store', 'data')]
)

这种方案更适合变量后续有服务端动态更新需求的场景，代码扩展性更好。

内容的提问来源于stack exchange，提问作者Vijay B