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

<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
   ? <textarea {...inputAttributes}></textarea>
   : <input {...inputAttributes}/>
 return inputMarkup
 }

导入 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 {}								 
 3/4   首页 上一页 1 2 3 4 下一页 尾页