Details on how to write react in a vue project

// index.vue
<template>
  <div class="wrapper">
    <Common :opt="list" />
  </div>
</template>
 
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import Common from "./components/Common";

@Component({
  name: "App",
  components:
    Common,
  },
})
export default class App extends Vue {
  private list = ["I want to go to Taobao", "I want to go to Baidu", "I want to go to JD"];
}
</script>

import { CreateElement } from 'vue';
import { Component, Vue, Prop } from 'vue-property-decorator';

@Component({
    name: 'Common'
})
export default class Common extends Vue {
    @Prop(Object) opt!: any[]

    render(h: CreateElement) {
        return <span>
            {
                this.opt.map((it) => {
                    return <span style="marginRight:10px">{it}</span>
                })
            }
        </span>
    }
}

// Transform the data of index.vue above

  private list = [
    { render: () => ["a", { style: { color: "red" } }, "I want to go to Taobao"] },
    { render: () => ["a", { style: { color: "green" } }, "I want to go to JD."] },
    { render: () => ["a", { style: { color: "pink" } }, "I want to go to Baidu"] },
  ];

  {
                this.opt.map((it) => {
                    return h(...it.render())
                })
            }

// tsx transformation <span>
            {
                this.opt.map((it) => {
                    return it.render(h)
                })
            }
</span>


We can do this on the index.vue page:
// index.vue
private list = [
    {
      render: (h: CreateElement) =>
        h("a", { style: { color: "red", marginRight: "5px" } }, "I want to go to Taobao"),
    },
    {
      render: (h: CreateElement) =>
        h("a", { style: { color: "green", marginRight: "5px" } }, "I want to go to JD"),
    },
    {
      render: (h: CreateElement) =>
        h("a", { style: { color: "pink", marginRight: "5px" } }, "I want to go to Baidu"),
    },
  ];

// index.vue transformation {
      render: (h: CreateElement) =>
        h(
          "h1",
          {
            style: { color: "green", marginRight: "5px" },
          },
          "I'm going to JD."
        ),
    },

// index.vue
private list = [
   {
      render: (h: CreateElement) =>
        h(
          "a",
          {
            style: { color: "red", marginRight: "5px" },
            on: {
              click: () => this.iWillGoWhere("TB"),
            },
          },
          "I want to go to Taobao"
        ),
   }]
   
 iWillGoWhere(type: string) {
    const goWhere: any = {
      TB: () => {
        alert("I'm going to Taobao!");
      },
      JD: () => {
        alert("I'm going to JD!");
      },
      BD: () => {
        alert("I want to go to Baidu!");
      },
    };
    goWhere[type]();
  }