背景简介

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-clsx

npm  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.cjs
 plugins: [
    [
      "@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>

项目地址

github.com/zsh-crazy/p… 如果对你有帮助喜欢就star一下吧，帮忙转发，多多支持，谢谢

Preact 中在JSX像Vue一样处理class