Vue JSONForms自定义文本渲染器报错：r.tester is not a function

错误含义 #

r.tester is not a function 表示JSONForms在匹配渲染器时，尝试调用你注册的渲染器条目里的tester属性，但该属性无法被识别为可执行函数，导致匹配逻辑失败。

问题原因与修复步骤 #

你的代码中tester: rankWith(1, isStringControl)本身是正确的（rankWith会返回符合要求的tester函数），核心问题出在渲染器条目未被正确注册到JSONForms的渲染器注册表中，导致框架无法正确识别tester的函数类型。

1. 正确注册自定义渲染器 #

在Vue应用入口文件（如main.ts）中，将你的自定义渲染器条目添加到JSONForms的配置内：

import { createApp } from 'vue'
import App from './App.vue'
import { JsonForms } from '@jsonforms/vue'
import { vanillaRenderers } from '@jsonforms/vue-vanilla'
// 导入你的自定义渲染器条目
import { entry as CustomTextRenderer } from './components/RenderersText.vue'

const app = createApp(App)
app.use(JsonForms, {
  // 合并官方渲染器与自定义渲染器，官方渲染器可作为降级备选
  renderers: [...vanillaRenderers, CustomTextRenderer]
})
app.mount('#app')

2. 修复组件模板的缺失问题（后续必现错误） #

你的模板中使用了<v-input>但未导入或注册该组件，若使用原生输入框，可修改模板如下（useJsonFormsControl会返回data、handleChange、label等核心属性）：

<template>
  <input
    :value="data"
    @input="handleChange"
    :placeholder="label"
    :disabled="disabled"
  />
</template>

3. 验证tester函数有效性（可选排查步骤） #

若仍有疑问，可在渲染器组件文件中添加测试代码，确认tester函数正常：

// 在<script>标签内添加
const testTester = rankWith(1, isStringControl)
// 控制台应输出1，表示匹配字符串类型控件成功
console.log(testTester({ type: 'string' } as ControlElement))

总结 #

完成渲染器条目注册后，JSONForms就能正确识别tester函数，解决当前错误。同时修复模板的组件引用问题，即可完成基础自定义文本渲染器的构建。

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