Migrate jsx compoents

[Edge00]

Some of my components are written in jsx (vue@2) For example:

<script>
  import isArray from 'lodash/isArray'
  import isFunction from 'lodash/isFunction'
  import map from 'lodash/map'
  import { NewBsBox } from '@myComp'

  export default {
    name: 'Paragraph',
    functional: true,
    props: {
      content: {
        type: [String, Function, Array],
      },
      bs: {
        type: Object,
        default: () => ({}),
      },
    },
    render(h, { props }) {
      const { content, bs } = props
      let lst = content
      if (!isArray(lst)) {
        lst = [lst]
      }
      return (
        <NewBsBox bs={bs}>
          {
            map(lst, txt => {
              let text = txt
              if (isFunction(text)) {
                text = text(h)
              }
              return <NewBsBox>{text}</NewBsBox>
            })
          }
        </NewBsBox>
      )
    },
  }
</script>

If migrate to vue@3. Do i have to rewrite all my jsx components?

[Edge00]

@Amour1688 PTAL Thanks !

[Amour1688]

You don't need to rewrite it at all. Here is the breaking change:

1. Global render function

- render(h) {
+ render() {
  return (
    <AnchoredHeading level={1}>
      <span>Hello</span> world!
    </AnchoredHeading>
  )
}

2. { on, props, attrs, ... } configuration is flattened

const vcUploadProps = {
-  props: {
-    ...this.$props,
-   prefixCls,
-    beforeUpload: this.reBeforeUpload,
-  },
-  on: {
-    start: this.onStart,
-    error: this.onError,
-    progress: this.onProgress,
-    success: this.onSuccess,
-    reject: this.onReject,
- },
+  ...this.$props,
+  prefixCls,
+  beforeUpload: this.reBeforeUpload,
+  onStart: this.onStart,
+  onError: this.onError,
+  onProgress: this.onProgress,
+  onSuccess: this.onSuccess,
+  onReject: this.onReject,
+  ref: 'uploadRef',
+  attrs: this.$attrs,
+  ...this.$attrs,
};

And you can refer to the documentation here