vue 中 jsx 使用 jsx 绑定属性的拓展写法

一、在 vue2 中你需要把 属性 放在 props 下，事件 放在 on 下

vue2 jsx 中写法：

   renderItem() {
        const {itemProps, slot, render, field, suffix, component} = this.$props.schema;
        const {colon} = this.$props.formProps;


        console.log({...(itemProps)})
        const getContent = () => {
          return this.renderComponent();
        };

        const obj =  {
          label:3
        }

        // 划重点 
        // 在 vue2 中你需要把 属性 放在 props 下，事件 放在 on 下
        // 而 vue3 中函数渲染属性被展平了

        const dynamicBind = {
          props: { label: 3, required: true }
        }



        return (
          <el-form-item
            {...dynamicBind}
          >
            <div style="display:flex">
              <div style="flex:1;">{getContent()}</div>
            </div>
          </el-form-item>
        );
      },

二、vue3 中函数渲染属性被展平了

vue3 jsx 中写法：

 function renderItem() {
        const { itemProps, slot, render, field, suffix, component } = props.schema;
        const { labelCol, wrapperCol } = unref(itemLabelWidthProp);
        const { colon } = props.formProps;

        if (component === 'Divider') {
          return (
            <Col span={24}>
              <Divider {...unref(getComponentsProps)}>{renderLabelHelpMessage()}</Divider>
            </Col>
          );
        } else {
          const getContent = () => {
            return slot
              ? getSlot(slots, slot, unref(getValues))
              : render
              ? render(unref(getValues))
              : renderComponent();
          };
          
          const showSuffix = !!suffix;
          const getSuffix = isFunction(suffix) ? suffix(unref(getValues)) : suffix;

          return (
            <Form.Item
              name={field}
              colon={colon}
              class={
   
   { 'suffix-item': showSuffix }}

              // vue3 中函数渲染属性被展平了 如下
              {...(itemProps as Recordable)}

              label={renderLabelHelpMessage()}
              rules={handleRules()}
              labelCol={labelCol}
              wrapperCol={wrapperCol}
            >
              <div style="display:flex">
                <div style="flex:1;">{getContent()}</div>
                {showSuffix && <span class="suffix">{getSuffix}</span>}
              </div>
            </Form.Item>
          );
        }
      }