在 Vue 中使用 JSX 及使用它的原因浅析

<div>
 <textarea v-if="multiline" v-model="content" :name="name" :placeholder="placeholder" :aria-invalid="false">
 <input v-else v-model="content" :name="name" :placeholder="placeholder" :aria-invalid="false">
 </div>

...
 export default {
  name: 'TextField',
  render (createElement) {
   const tag = this.multiline "htmlcode">

// HTML
<div>
 <p>Only you can stop forest fires</p>
</div>


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


...
render (createElement) {
 return createElement(
 'div',
 {},
 createElement(
  'p',
  {},
  'Only you can stop forest fires'
 )
 )
}
...


现在你可能会问这个问题：“对可读性来说这不好吗？” 答案是肯定的。 一旦定义了具有许多元素嵌套级别或具有多个同级元素的组件，我们就会遇到这个新问题。
这就是 JSX 出现的原因，它可以很好的解决此类问题。
JSX 是什么


JSX 是 Facebook 工程团队创造的一个术语。
JSX 是 JavaScript 的类似XML的语法扩展，没有任何定义的语义。
JSX 不打算由引擎或浏览器实现。相反，我们将使用 Babel 之类的转置器将JSX转换成常规的 JS 。


// 此行是JSX的示例
const heading = <h1>Welcome to Scotch</h1>;


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


如果使用的 Vue-cli 大于或等于 3.0 版本，那么就直接可以使用JSX的语法了。
如果您使用的是不支持 JSX 的Vue-cli较旧版本，则可以通过安装 babel-preset-vue-app 来添加它，并将其添加到您的 .babelrc 文件中。


# Using npm
 npm install --save-dev babel-preset-vue-app
# Using yarn
 yarn add --dev babel-preset-vue-app


在 .babelrc 文件中，添加：


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


我们现在可以在组件的 render 函数中使用 JSX。
在 Vue 中使用 JSX 需要注意的地方

在 Vue 中使用JSX需要注意几点。
要监听 JSX 中的事件，我们需要 “on” 前缀。 例如，将 onClick 用于单击事件。


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


要修改事件，请使用


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


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


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


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


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




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


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





在 render 中使用JSX


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


render (createElement) {
  const inputAttributes = {
   class: 'input-field has-outline', // class definition
   onClick: this.handleClick // event handler
   backdrop: false // custom prop
  }
  const inputMarkup = this.multiline
   "color: #ff0000">导入 Vue JS 组件


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


import {Button} from '../components'

export default {
  render (createElement) {
   return <Button primary={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 声明。


import Vue, {VNode} from 'vue'

declare global {
 namespace JSX {
  interface Element extends VNode {}
  interface ElementClass extends Vue {}
  interface ElementAttributesProperty {
  $props: {}
  }
  interface IntrinsicElements {
 [elemName: string]: any
  }
 }
 }


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


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



代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug 。
总结
以上所述是小编给大家介绍的在 Vue 中使用 JSX 及使用它的原因浅析，希望对大家有所帮助！