关于javascript:教练怎么在vue项目里写react

51次阅读

共计 2408 个字符，预计需要花费 7 分钟才能阅读完成。

我抵赖了我是题目党，本篇文章是在 vue 我的项目里写 tsx 的一篇介绍。作为一个 reacter，目前的业务天天应用 vue2+ts 让我非常的不难受。我对于 vue 也不是很相熟，想回到我的 react 时代。于是在查问官网之后发现在 vue 外面写 jsx 也挺有意思的，遂记录。

vue2+ts 的我的项目配置这里就不开展了，网上一搜一大推。

index.vue 是页面路由，寄存各个组件和专用逻辑。components 文件夹中寄存我的 tsx 组件。

接下来就开始写 tsx。

你能够间接创立 jsx/tsx 文件

这次的我的项目构造是这样的：

在 vue 文件里这么应用

// 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 = ["我要去淘宝", "我要去百度", "我要去京东"];
}
</script>

tsx 这么写

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

在来看一下页面

这该死的 react 既视感，竟是如此的迷人

可能有心者留神到了我还援用了一个 CreateElement，这是干嘛的呢。这玩意叫 渲染函数 。不喜爱读 vue 那么大串的文档的兄弟看这里。简略解释：这个货色能够渲染一个 vnode 节点。 它比模板更靠近编译器。什么意思呢？意思就是模板语法也会编译成渲染函数。所以咱们间接用渲染函数不就相当于节俭了模板语法到渲染函数的过程。四舍五入我的项目性能又是一个大的晋升！

简略介绍一下传参：

第一个参数: {String | Object | Function} 一个 HTML 标签名、组件选项对象，或者 resolve 了上述任何一种的一个 async 函数。必填项。

第二个参数: Object 一个与模板中 attribute 对应的数据对象。

第三个参数: {String | Array} 文本节点或子级虚构节点 (VNodes)。

渲染函数给 vue 带来了很多的灵活性，以前你想自定义在子组件里插入货色，得写一大堆的插槽。<slot>。有了渲染函数咱们能够这么玩。

// 革新一下下面的 index.vue 的 data

  private list = [{ render: () => ["a", { style: { color: "red"} }, "我要去淘宝"] },
    {render: () => ["a", { style: { color: "green"} }, "我要去京东"] },
    {render: () => ["a", { style: { color: "pink"} }, "我要去百度"] },
  ];

tsx 中这么写：

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

就能够渲染出花里胡哨的页面了

咱们还能够这么玩：

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


在 index.vue 页面咱们就能够这么玩：// index.vue
private list = [
    {render: (h: CreateElement) =>
        h("a", { style: { color: "red", marginRight: "5px"} }, "我要去淘宝"),
    },
    {render: (h: CreateElement) =>
        h("a", { style: { color: "green", marginRight: "5px"} }, "我要去京东"),
    },
    {render: (h: CreateElement) =>
        h("a", { style: { color: "pink", marginRight: "5px"} }, "我要去百度"),
    },
  ];

后果也是同样的花哨

咱们同样能够渲染乌七八糟的标签！

// index.vue 革新
 {render: (h: CreateElement) =>
        h(
          "h1",
          {style: { color: "green", marginRight: "5px"},
          },
          "我要去京东"
        ),
    },

咱们能够得心应手的在渲染函数中定义事件：

// index.vue
private list = [
   {render: (h: CreateElement) =>
        h(
          "a",
          {style: { color: "red", marginRight: "5px"},
            on: {click: () => this.iWillGoWhere("TB"),
            },
          },
          "我要去淘宝"
        ),
   }]
   
 iWillGoWhere(type: string) {
    const goWhere: any = {TB: () => {alert("我要去淘宝！");
      },
      JD: () => {alert("我要去京东！");
      },
      BD: () => {alert("我要去百度！");
      },
    };
    goWhere[type]();}

这样就能够啦！

本次文章是对 vue 灵活性应用的入门。请各位 vue 大佬不要喷我~

正文完