在Dash Ag-Grid中渲染Dash html.Div组件的问题排查

1. 报错根源解析 #

（1）"Objects are not valid as a React child" #

你在Python中直接将html.Div对象存入数据集，传递到前端后会被序列化为普通字典。React无法直接渲染字典对象，因此抛出该错误。Ag-Grid的cellRenderer接收的是单元格的原始数据，而非Python端的Dash组件对象。

（2）"TypeError: window.html is undefined" #

Dash的前端组件并非挂载在window.html全局对象上，你在JS中尝试通过window.html.Div创建组件的写法完全错误，自然找不到对应对象。

2. 正确实现步骤 #

步骤1：Python端传递结构化数据 #

不要直接存储html.Div，而是传递包含渲染所需信息的字典，示例代码：

import dash_ag_grid as dag
from dash import Dash, html

app = Dash(__name__)

# 构造结构化数据集，而非直接放入html.Div对象
row_data = [
    {
        "id": 1,
        "content": "自定义内容1",
        "style": {"color": "red", "fontSize": "16px"}
    },
    {
        "id": 2,
        "content": "自定义内容2",
        "style": {"backgroundColor": "#f0f0f0", "padding": "4px"}
    }
]

# 配置Ag-Grid列定义，指定自定义cellRenderer
column_defs = [
    {"headerName": "ID", "field": "id"},
    {
        "headerName": "自定义内容",
        "field": "content",
        "cellRenderer": "customDivRenderer"
    }
]

app.layout = html.Div([
    dag.AgGrid(
        columnDefs=column_defs,
        rowData=row_data,
        dashGridOptions={"rowHeight": 40}
    )
])

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

步骤2：编写正确的JS cellRenderer #

在assets/dashAgGridComponentFunctions.js中，按照Ag-Grid规范编写，可选择原生DOM或React方式创建元素：

原生DOM写法

var dagcomponentfuncs = (window.dashAgGridComponentFunctions = window.dashAgGridComponentFunctions || {});

dagcomponentfuncs.customDivRenderer = function (params) {
    // 获取Python传递的结构化数据
    const content = params.data.content;
    const style = params.data.style;

    // 创建div元素并设置属性
    const div = document.createElement('div');
    div.textContent = content;
    Object.assign(div.style, style);
    return div;
};

React元素写法

var dagcomponentfuncs = (window.dashAgGridComponentFunctions = window.dashAgGridComponentFunctions || {});

dagcomponentfuncs.customDivRenderer = function (params) {
    const { content, style } = params.data;
    return React.createElement('div', { style: style }, content);
};

3. 常见误区规避 #

• 禁止在Python端将Dash组件对象直接传入Ag-Grid的rowData，必须转换为前端可解析的原始数据（字符串、数字、字典）。
• JS中不要尝试通过window.html访问Dash组件，需使用原生DOM API或React API创建元素。
• cellRenderer的返回值必须是DOM元素、React元素或字符串/数字等基本类型，不能是普通对象。

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