如何通过data-dojo-props传递数组？自定义Dojo组件HTML5适配问题

作为从Java转Dojo的新手，这种声明式属性传递的细节确实容易踩坑，我结合自己的经验给你几个关键的解决点：

1. 确保data-dojo-props中的数组语法正确 #

data-dojo-props本质是接受类JSON格式的字符串，但注意外层属性名不需要引号，而数组内部的字符串元素必须加引号，对象数组的键值对也要符合JSON规范。

错误示例（字符串没加引号，Dojo会当成变量解析）：

<div data-dojo-type="my.custom.Component" 
     data-dojo-props="simplePageFieldTranslations: [id, name, email]">
</div>

正确示例：

<!-- 普通字符串数组 -->
<div data-dojo-type="my.custom.Component" 
     data-dojo-props="simplePageFieldTranslations: ['userId', 'userName', 'userEmail']">
</div>

<!-- 对象数组（比如字段映射关系） -->
<div data-dojo-type="my.custom.Component" 
     data-dojo-props="simplePageFieldTranslations: [{src: 'id', dest: 'userId'}, {src: 'name', dest: 'userName'}]">
</div>

2. 动态生成数组时注意转义 #

如果你是从Java后端动态生成这个数组（比如通过JSP/Thymeleaf），一定要确保输出的JSON字符串是转义后的合法格式，避免引号冲突破坏HTML结构。

比如在JSP中，使用JSTL的<c:out>来安全输出：

<div data-dojo-type="my.custom.Component" 
     data-dojo-props="simplePageFieldTranslations: <c:out value="${pageScope.translationsJson}" escapeXml="true"/>">
</div>

这里的translationsJson是Java端已序列化为JSON字符串的数组，escapeXml="true"会自动转义双引号等特殊字符，保证HTML语法合法。

3. 组件内部正确接收属性 #

要确保你的自定义Dojo组件已经显式声明了这个属性，并且通过Dojo的属性系统正确获取。建议给属性设置默认值，避免未传递时出现undefined：

define(["dojo/_base/declare", "dijit/_WidgetBase", "dijit/_TemplatedMixin"], 
function(declare, _WidgetBase, _TemplatedMixin) {
    return declare("my.custom.Component", [_WidgetBase, _TemplatedMixin], {
        // 声明数组属性，默认空数组
        simplePageFieldTranslations: [],
        
        postCreate: function() {
            this.inherited(arguments);
            // 通过get方法获取属性（Dojo属性系统的推荐用法）
            const translations = this.get("simplePageFieldTranslations");
            console.log("Received field translations:", translations);
            // 在这里继续你的业务逻辑处理
        }
    });
});

4. 调试排查技巧 #

如果还是没生效，试试这两步快速定位问题：

• 打开浏览器开发者工具，查看渲染后的HTML元素，确认data-dojo-props的内容是否和预期一致，有没有语法错误（比如遗漏逗号、引号不匹配）
• 在组件的postCreate方法中打印属性值，看是否为undefined或者不是预期的数组类型，排查是传递环节还是接收环节出了问题

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