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

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 {} interface ElementAttributesProperty { $props: {} } interface IntrinsicElements { [elemName: string]: any } } }

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

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

代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 。

总结

以上所述是小编给大家介绍的在 Vue 中使用 JSX 及使用它的原因浅析，希望对大家有所帮助！

您可能感兴趣的文章: