如何将含:class的HTML代码转换为JSX并用于Next.js项目

一、:class语法转JSX的核心规则 #

1. 静态类替换 #

HTML里的class属性在JSX中必须改为className：

<!-- HTML -->
<div class="card"></div>

// JSX
<div className="card"></div>

2. 动态类绑定（对应Vue的:class） #

对于需要根据状态切换的动态类，JSX用**花括号{}**包裹表达式实现，常用三种写法：

模板字符串（简单条件）

适合单个或少量条件判断：

// Vue: <div :class="`card ${isActive ? 'active' : ''}`"></div>
<div className={`card ${isActive ? 'active' : ''}`}></div>

对象语法（多独立条件）

每个类名对应一个布尔值，控制是否生效：

// Vue: <div :class="{ card: true, active: isActive, error: hasError }"></div>
<div className={{ card: true, active: isActive, error: hasError }}></div>

// 用classnames库简化（需先安装：npm i classnames）
import classNames from 'classnames';
<div className={classNames('card', { active: isActive, error: hasError })}></div>

数组语法（多个动态类）

将类名放入数组，再用join(' ')拼接：

// Vue: <div :class="[baseClass, isActive ? activeClass : '']"></div>
<div className={[baseClass, isActive ? activeClass : ''].join(' ')}></div>

二、Windmill Dashboard找回密码页面的JSX实现（Next.js适配） #

以下是Windmill Dashboard找回密码页面的HTML转JSX代码，已适配Next.js路由和React状态管理：

import Link from 'next/link';
import { useState } from 'react';

export default function ForgotPassword() {
  const [email, setEmail] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    // 此处添加密码重置逻辑（调用后端API等）
    console.log('重置链接发送至:', email);
  };

  return (
    <div className="min-h-screen bg-gray-100 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
      <div className="sm:mx-auto sm:w-full sm:max-w-md">
        <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
          重置密码
        </h2>
        <p className="mt-2 text-center text-sm text-gray-600">
          输入您的邮箱，我们会发送密码重置链接
        </p>
      </div>

      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
        <div className="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
          <form className="space-y-6" onSubmit={handleSubmit}>
            <div>
              <label htmlFor="email" className="block text-sm font-medium text-gray-700">
                邮箱地址
              </label>
              <div className="mt-1">
                <input
                  id="email"
                  name="email"
                  type="email"
                  autoComplete="email"
                  required
                  className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                />
              </div>
            </div>

            <div>
              <button
                type="submit"
                className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
              >
                发送重置链接
              </button>
            </div>
          </form>

          <div className="mt-6">
            <div className="relative">
              <div className="absolute inset-0 flex items-center">
                <div className="w-full border-t border-gray-300"></div>
              </div>
              <div className="relative flex justify-center text-sm">
                <span className="px-2 bg-white text-gray-500">已有账号？</span>
              </div>
            </div>

            <div className="mt-6">
              <Link href="/login" passHref>
                <a className="w-full flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                  返回登录
                </a>
              </Link>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

转换要点： #

1. 所有class属性替换为className。
2. 用Next.js的Link组件实现客户端路由跳转，替代原生<a>标签。
3. 新增useState管理邮箱输入框的状态。
4. 添加表单提交事件处理函数，可对接后端API完成密码重置流程。

内容的提问来源于stack exchange，提问作者Mohankumar R