vue项目中使用jsx/render写el-form校验报错_el-form jsx

折磨了一天的问题，心累，直接上代码

element-ui版本： “element-ui”: “^2.11.0”

渲染时报错：[Vue warn]: Invalid handler for event “input”: got undefined

对整个表单校验时报错：[Element Warn][Form]model is required for validate to work!

前提：model 跟校验规则rules都写了

代码:

export default {
    data() {
        return {
            dto: {
                name: undefined
            },
            rules: {
                name: [
                    { required: true, message: '请输入名称', trigger: ['change', 'blur'] }
                ]
            }
        }
    },
    render() {
        return (
            <div>
                <el-form size="small" model={this.dto} rules={this.rules} ref="form">
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model={this.dto.name} />
                    </el-form-item>
                </el-form>
                <div style="text-align: center">
                    <el-button size="small" on-click={this.save}>save</el-button>
                </div>
            </div>
        )
    },
    methods: {
        save() {
            this.$refs.form.validate(flag => {
                console.log('save',flag)
            })
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

由报错 [Element Warn][Form]model is required for validate to work! 中猜测model未传入elForm组件中

在element-ui 源码中打印传入的model与rules

rules正常， model 为undefined

代码(正确写法）：

export default {
    render() {
        return (
            <div>
            // 最主要的地方： model通过props传入
                <el-form size="small" props={{model: this.dto, rules: this.rules}} ref="form">
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model={this.dto.name} />
                    </el-form-item>
                </el-form>
                <div style="text-align: center">
                    <el-button size="small" on-click={this.save}>save</el-button>
                </div>
            </div>
        )
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

报错排除，校验正常.

分析

我认为主要原因还是归结于vue的jsx语法跟react的jsx语法有一定的区别

React中父子之间传递的所有数据都是属性，即所有数据均挂载在props下（style, className, children, value， onChange等等）。

Vue则不然，仅仅属性就有三种：组件属性props，普通html属性attrs，Dom属性domProps。
从vue官网中可以知道vue的渲染函数：组件属性通过通过props传入

vue官网链接-节点、树以及虚拟-DOM
#深入数据对象

{
  // 与 `v-bind:class` 的 API 相同，
  // 接受一个字符串、对象或字符串和对象组成的数组
  'class': {
    foo: true,
    bar: false
  },
  // 与 `v-bind:style` 的 API 相同，
  // 接受一个字符串、对象，或对象组成的数组
  style: {
    color: 'red',
    fontSize: '14px'
  },
  // 普通的 HTML attribute
  attrs: {
    id: 'foo'
  },
  // 组件 prop
  props: {
    myProp: 'bar'
  },
  // DOM property
  domProps: {
    innerHTML: 'baz'
  },
  // 事件监听器在 `on` 内，
  // 但不再支持如 `v-on:keyup.enter` 这样的修饰器。
  // 需要在处理函数中手动检查 keyCode。
  on: {
    click: this.clickHandler
  },
  // 仅用于组件，用于监听原生事件，而不是组件内部使用
  // `vm.$emit` 触发的事件。
  nativeOn: {
    click: this.nativeClickHandler
  },
  // 自定义指令。注意，你无法对 `binding` 中的 `oldValue`
  // 赋值，因为 Vue 已经自动为你进行了同步。
  directives: [
    {
      name: 'my-custom-directive',
      value: '2',
      expression: '1 + 1',
      arg: 'foo',
      modifiers: {
        bar: true
      }
    }
  ],
  // 作用域插槽的格式为
  // { name: props => VNode | Array<VNode> }
  scopedSlots: {
    default: props => createElement('span', props.text)
  },
  // 如果组件是其它组件的子组件，需为插槽指定名称
  slot: 'name-of-slot',
  // 其它特殊顶层 property
  key: 'myKey',
  ref: 'myRef',
  // 如果你在渲染函数中给多个元素都应用了相同的 ref 名，
  // 那么 `$refs.myRef` 会变成一个数组。
  refInFor: true
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

---

续：在vue写中写jsx，使用element-ui组件，组件中写传入属性无效或报错时，可以将属性包裹在props中。一般情况下都是可以解决的。