背景简介

vue的class处理很方便，React中className中JSX却没有去很好的处理class，之后便出来了react-auto-classnames 可以像vue一样去写class，这样就大大提高了开发的效率，随着preact中不断的广泛应用，便编写了preact插件来自动取处理className。即preact-auto-clsx

插件简介

preact-auto-clsx主要用来处理jsx中的className，不需要手动的引入，动态的取去处理，支持typescript。

使用安装

pnpm add -D preact-auto-clsxnpm  i -D preact-auto-clsx

vite中使用

//tsconfig.json"jsx": "react-jsx",
"jsxImportSource": "preact-auto-clsx"//vite.config.ts
plugins: [preact({babel:{babelrc: true,configFile: true,}})],//babel.config.cjsplugins: [["@babel/plugin-transform-react-jsx",{runtime: "automatic",importSource: "preact-auto-clsx",},],],

webpack中使用

ts-loader来处理

//tsconfig.json
{"compilerOptions": {"jsx": "react-jsx","jsxImportSource": "preact-auto-clsx",}
}//webpack.config.js
module: {rules: [{ test: /.tsx?$/, use: 'ts-loader' },],},

babel-loader 来处理

//tsconfig.json
{"compilerOptions": {"jsx": "react-jsx","jsxImportSource": "preact-auto-clsx",}
}//webpack.config.js
module: {rules: [{ test: /.tsx?$/, use: 'babel-loader' }]
}
//babel.config.cjs
plugins: [["@babel/plugin-transform-react-jsx",{runtime: "automatic",importSource: "preact-auto-clsx",}]
]

在项目中应用

<div className={['a',{b:true}]}></div>

项目地址

https://github.com/zsh-crazy/preact-auto-clsx.git
如果对你有帮助喜欢就star一下吧，帮忙转发，多多支持，谢谢

Preact 在TSX中优雅使用className相关推荐

Spring BPP中优雅的创建动态代理Bean
Spring BPP中优雅的创建动态代理Bean 一.前言本文章所讲并没有基于Aspectj,而是直接通过Cglib以及ProxyFactoryBean去创建代理Bean.通过下面的例子,可以看出C ...
在tsx中引入less会提示模块找不到,但是可以运行
在tsx中引入less或者 sass文件会提示模块找不到,但是可以运行,想必很多人都遇到过这个问题? 具体提示: 处理方案: (1)使用变量接收 const cls = require('./inde ...
easyswoole数据库连接池_如何在 Swoole 中优雅的实现 MySQL 连接池
如何在 Swoole 中优雅的实现 MySQL 连接池一.为什么需要连接池 ? 数据库连接池指的是程序和数据库之间保持一定数量的连接不断开, 并且各个请求的连接可以相互复用, 减少重复连接数据库带来 ...
如何在MyBatis中优雅的使用枚举
From: https://segmentfault.com/a/1190000010755321 问题在编码过程中,经常会遇到用某个数值来表示某种状态.类型或者阶段的情况,比如有这样一个枚举: p ...
python切面异常处理_Spring项目中优雅的异常处理
Spring项目中优雅的异常处理前言如今的Java Web项目多是以 MVC 模式构建的,通常我们都是将 Service 层的异常统一的抛出,包括自定义异常和一些意外出现的异常,以便进行事务回滚, ...
Laravel中优雅的验证日期需要大于今天
我们有时会碰到一个场景,比如买车票,需要进行查询车票剩余,这时候需要一个日期范围,开始日期必须大于等于今天,结束日期必须大于等于开始日期. Version Laravel 5.5.40 PHP 7.1 ...
初学者必知的Python中优雅的用法
初学者必知的Python中优雅的用法:http://python.jobbole.com/81393/
如何在vscode中优雅的编写C语言
如何在vscode中优雅的编写C语言各位好,我认为vscode编辑器在windows环境下除了Pycharm外是最方便的IDE了,但在初学C语言时很少有人的第一个C语言软件使用的是vscode来编译 ...
Vue项目开发中优雅的切换服务端ip
Vue项目开发中优雅的切换服务端ip 在进行Vue开发的时候,需要配置项目对应服务端的ip地址,但如果需要在多个服务端间进行切换,通常的做法是:手动修改vue.config.js配置文件中的服务端ip ...
60行Shell代码实现在命令行中优雅地听歌
本文也发在了我的新个人博客上了,可以点击下面的链接获取更好的阅读体验: 60行Shell代码实现在命令行中优雅地听歌 0. 起因起因就是对探索新歌失去了兴趣,并且觉得各种音乐播放软件都不怎么好用,而 ...

Preact 在TSX中优雅使用className