JSONForms自定义渲染器：如何将多字段合并为单字符串展示

完全可以把多元素（标题+对应值）合并成单字符串展示，优先在自定义渲染器中实现，这是最直接且易维护的方案，没必要动自定义布局。

具体实现方式 #

• 先给需要合并的字段组（比如地址）做个标识（比如在UI Schema里加ui:widget: "address-combined"），让自定义渲染器能识别这类字段；
• 在渲染器逻辑里，把关联的子字段值取出来按要求拼接：
  • 比如street和nr拼接成${street}, ${nr}
  • zipCode和city拼接成${zipCode}, ${city}
• 最后把拼接好的字符串作为单个内容块输出即可，搭配对应的组标题（比如“地址”）。

为什么不选自定义布局？ #

布局层的核心职责是控制页面元素的排版（比如行列布局、间距、对齐），而字段值的格式化拼接属于数据渲染逻辑，放在渲染器里更符合单一职责原则——后续要调整拼接规则（比如换分隔符、加额外信息），只需要修改渲染器代码，不会影响整体页面布局的稳定性。

简单伪代码参考 #

// 自定义合并字段渲染器
const CombinedFieldRenderer = ({ data, uiSchema }) => {
  // 根据UI Schema的标识判断要处理的字段类型
  if (uiSchema['ui:widget'] === 'address-street') {
    return <span>{data.street}, {data.nr}</span>;
  }
  if (uiSchema['ui:widget'] === 'address-city') {
    return <span>{data.zipCode}, {data.city}</span>;
  }
  // 其他普通字段的默认渲染逻辑
  return <span>{uiSchema.title}: {data[uiSchema.field]}</span>;
};

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