javascript - JSONForms Vue 基本字符串自定义渲染器

Question

所以我从 Vue JSONForms 开始，尝试创建一个简单的自定义文本渲染器。我知道 JSONForms 有 vue-vanilla 包，但我想了解自定义渲染器所需的基础知识，因为稍后我需要对我创建的每个自定义渲染器进行更多自定义。这是我到目前为止所拥有的:

<template>
    <v-input />
</template>

<script lang="ts">
import { ControlElement, JsonFormsRendererRegistryEntry, rankWith, isStringControl } from '@jsonforms/core'
import { useJsonFormsControl, RendererProps } from '@jsonforms/vue'
import { defineComponent } from 'vue'

const renderersText = defineComponent({
    name: 'renderers-text',
    setup (props: RendererProps<ControlElement>) {
        return useJsonFormsControl(props)
    },
})

export default renderersText

export const entry: JsonFormsRendererRegistryEntry = {
    renderer: renderersText,
    tester: rankWith(1, isStringControl),
}
</script>

但是我收到了 r.tester is not a function 错误。知道这意味着什么和/或我需要修复什么吗？提前致谢!

Answer 1

在jsonforms vue模板中，渲染器是这样添加的

const renderers = Object.freeze([
    ...vanillaRenderers,
    // here you can add custom renderers
])

vanillaRenderers 集合(类型为any[])实际上是 JsonFormsRendererRegistryEntry 对象的集合。如果将渲染器对象添加到集合中，例如，会发生错误 r.tester is not a function

const renderers = Object.freeze([
    ...vanillaRenderers,
    renderersText,
])

相反，请确保添加一个 JsonFormsRendererRegistryEntry 对象，您可以完整定义该对象

const renderers = [
  ...vanillaRenderers,
  {
    tester: rankWith(
      1,
      isStringControl,
    ),
    renderer: renderersText,
  }
];