Details on how to write react in a vue project

We can create jsx/tsx files directly

The project structure this time is as follows:

Use it like this in the vue file

// 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>

tsx writes like this

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>
    }
}

Take a look at the page

Someone may have noticed that I also referenced CreateElement . What is this for? This thing is called a render function. Brothers who don’t like reading such a long document about vue can read here. Simple explanation: This thing can render a vnode node. It's closer to the compiler than templates. What does it mean? This means that the template syntax will also be compiled into a rendering function. So if we use the rendering function directly, it is equivalent to saving the process from template syntax to rendering function. The performance of the rounding project is another big improvement!

A brief introduction to parameter passing:

First parameter: { String | Object | Function } An HTML tag name, a component options object, or an async function that resolve to any of the above. Required field.

The second parameter: Object is a data object corresponding to attribute in the template.

The third parameter: { String | Array } text nodes or child virtual nodes ( VNodes ).

The rendering function brings a lot of flexibility to Vue. In the past, if you wanted to customize the insertion of something in a child component, you had to write a lot of <slot> . With the rendering function we can play like this.

// 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 is written in tsx:

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

You can render a fancy page.

We can also play like this:

// 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"),
    },
  ];

The result is the same fancy

We can also render gibberish labels!

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

We can define events in the rendering function as we like:

// 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]();
  }

That’s it!

This is the end of this article about how to write react in a vue project. For more information about writing react in a vue project, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:

Introduction to reactive function toRef function ref function in Vue3
Teach you how to implement Vue3 Reactivity
Detailed analysis of the difference between Ref and Reactive in Vue3.0
Detailed explanation and extension of ref and reactive in Vue3
Detailed explanation of the usage of setUp and reactive functions in vue3
The complete usage of setup, ref, and reactive in Vue3 combination API
Detailed explanation of the three major front-end technologies of React, Angular and Vue
Differences and advantages of Vue and React
What are the differences between Vue and React?
Vue and react in detail

<<: Detailed analysis of MySQL optimization of like and = performance

>>: How to reset the root password in Linux mysql-5.6