怎么在Vue中使用JSX

本篇内容主要讲解“怎么在Vue中使用JSX”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么在Vue中使用JSX”吧!

简介

先举一个例子来说明为什么 JSX 是好的。

我们要构建一个组件，该组件可以是普通的单行文本输入或多行输入(文本区域)。我们的模板声明可能看起来像这样。

typeof10;//=>'number'typeof'Hello';//=>'string'typeoffalse;//=>'boolean'typeof{a:1};//=>'object'typeofundefined;//=>'undefined'typeofSymbol();//=>'symbol'

从上面的代码片段中可以看到，我们很快就会遇到一些问题，比如重复代码等等。想象一下，必须支持input上面所列的各种属性。上面的这个小片段将会增长并成为一个难以维护的噩梦。

要解决这个问题，我们需要使用Vue进行降级处理，因此需要使用理接近Vue的内部API来解决这个问题。

render() 方法

注意:这里并不是说没有JSX就没有一种简单的方法来处理上面的问题，只是说将这个逻辑移动到带有JSX的render()方法可以使组件更直观。

我们在 Vue 中创建的每个组件都有一个render方法。这个就是 Vue 选择渲染组件的地方。即使我们不定义这个方法，Vue 也会为我们做这件事。

这意味着当我们在 Vue 中定义 HTML 模板时，Vue 的模板编译器将其编译为一个createElement函数，该函数带有几个参数并从render函数返回结果。

为了修复上一节中的代码，我们删除了template属性或template标签，并在组件上定义了render()方法。如果在组件上定义了render方法，则 Vue 将忽略template定义。

classCat{}constmyCat=newCat();myCatinstanceofCat;//=>true

上面的代码做了几件事：

• render方法从Vue获取一个createElement助手。

• 我们以编程方式定义我们的标签。

• 然后，我们创建标签并将其属性，类等作为对象传递。我们可以传递给createElement的选项很多。

• 我们返回新创建的元素进行渲染。

我们为 Vue 组件定义的每个模板都将转换为可返回createElement函数的render方法。因为这个原因，render方法将优先于模板定义。

举个例子：

//HTML<div><p>Onlyyoucanstopforestfires</p></div>

模板编译器将把上面的 HTML 转换成：

...render(createElement){returncreateElement('div',{},createElement('p',{},'Onlyyoucanstopforestfires'))}...

现在你可能会问这个问题：“对可读性来说这不好吗?” 答案是肯定的。一旦定义了具有许多元素嵌套级别或具有多个同级元素的组件，我们就会遇到这个新问题。

这就是 JSX 出现的原因，它可以很好的解决此类问题。

JSX 是什么

JSX 是 Facebook 工程团队创造的一个术语。

JSX 不打算由引擎或浏览器实现。相反，我们将使用 Babel 之类的转置器将JSX转换成常规的 JS 。

//此行是JSX的示例constheading=<h2>WelcometoScotch</h2>;

基本上，JSX 允许我们在 JS 中使用类似 Html 的语法。

配置 Vue 以使用 JSX

如果使用的 Vue-cli 大于或等于 3.0 版本，那么就直接可以使用JSX的语法了。

如果您使用的是不支持 JSX 的Vue-cli较旧版本，则可以通过安装babel-preset-vue-app来添加它，并将其添加到您的.babelrc文件中。

#Usingnpmnpminstall--save-devbabel-preset-vue-app#Usingyarnyarnadd--devbabel-preset-vue-app

在.babelrc文件中，添加：

{"presets":["vue-app"]}

我们现在可以在组件的render函数中使用 JSX。

在 Vue 中使用 JSX 需要注意的地方

在 Vue 中使用JSX需要注意几点。

要监听 JSX 中的事件，我们需要“on”前缀。例如，将onClick用于单击事件。

render(createElement){return(<buttononClickbuttononClick={this.handleClick}></button>)}

要修改事件，请使用

render(createElement){return(<buttononClick:preventbuttononClick:prevent={this.handleClick}></button>)}

绑定变量，注意这里不是使用 :

render(createElement){return(<buttoncontentbuttoncontent={this.generatedText}></button>)}

将HTML字符串设置为元素的内容，使用domPropsInnerHTML而不是使用v-html

render(createElement){return(<buttondomPropsInnerHTMLbuttondomPropsInnerHTML={htmlContent}></button>)}

我们也可以展开一个大对象：

render(createElement){return(<button{...this.largeProps}></button>)}

在 render 中使用JSX

回到我们最初的“TextField”组件。现在我们已经在 Vue 应用程序中启用了 JSX，我们现在可以这样做了。

render(createElement){constinputAttributes={class:'input-fieldhas-outline',//classdefinitiononClick:this.handleClick//eventhandlerbackdrop:false//customprop}constinputMarkup=this.multiline?<textarea{...inputAttributes}></textarea>:<input{...inputAttributes}/>returninputMarkup}

导入 Vue JS 组件

在 Vue 中使用JSX的另一个好处是，我们不再需要注册所需的每个组件。我们只是导入和使用。

import{Button}from'../components'exportdefault{render(createElement){return<ButtonprimaryButtonprimary={true}>Edit</Button>}}

如何使 JSX 与 TypeScript 一起使用

TypeScript 用作一种向 JavaScript添加类型检查的机制。要在 JSX 支持 TypeScript中，需要修改 tsconfig.json。

要在 TypeScript 中启用 JSX，请先将该文件另存为.tsx文件，然后将tsconfig.json修改为包括：

{"compilerOptions":{...."jsx":"preserve",}}

将jsx选项设置为“preserve”意味着 TypeScript 不应处理JSX。这样做使 Babel 可以控制所有JSX 和 TypeScript 坚持使用类型，因为它尚不支持 Vue JSX。

然后在项目中创建一个jsx.d.ts文件，并为 Vue 添加 TypeScript JSX 声明。

importVue,{VNode}from'vue'declareglobal{namespaceJSX{interfaceElementextendsVNode{}interfaceElementClassextendsVue{}interfaceElementAttributesProperty{$props:{}}interfaceIntrinsicElements{[elemName:string]:any}}}

确保 TypeScript 可以加载声明文件。或者，可以通过以下方式在tsconfig.json中为其添加自动加载功能：

{"compilerOptions":{..."typesRoot":["./node_modules/@types","./types"]}}

到此，相信大家对“怎么在Vue中使用JSX”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！