React TSX中Preline UI密码切换组件无法读取JSON格式Data属性问题

问题分析 #

使用Preline UI的密码切换组件时，点击按钮无法切换密码显示/隐藏状态。核心问题在于：

• React中直接传递字符串化的JSON格式data-hs-toggle-password属性，Preline的JS无法正确解析
• 动态导入preline后未执行组件初始化，导致交互逻辑未绑定到DOM元素

解决步骤 #

1. 修正Data属性传递方式 #

在React中，对于需要传递JSON配置的data属性，使用驼峰式命名的属性（React会自动转换为data-*格式），直接传入JS对象而非手动字符串化：

dataHsTogglePassword={{ target: "#hs-toggle-password" }}

2. 确保Preline组件初始化 #

动态导入preline后，调用HSStaticMethods.autoInit()初始化所有组件，确保新渲染的元素被Preline识别并绑定交互逻辑。

完整修复后的代码 #

"use client"
import React, { useEffect } from "react";

export default function TogglePass() {
  useEffect(() => {
    import('preline').then((module) => {
      // 初始化Preline组件，绑定交互逻辑
      module.HSStaticMethods.autoInit();
    });
  }, []); // 空依赖数组确保只在组件挂载时执行一次

  return (
    <>
      {/* Form Group */}
      <div className="max-w-sm">
        <label className="block text-sm mb-2 dark:text-white">Password</label>
        <div className="relative">
          <input
            id="hs-toggle-password"
            type="password"
            className=""
            placeholder="Enter password"
            defaultValue="12345qwerty"
          />
          <button
            type="button"
            dataHsTogglePassword={{ target: "#hs-toggle-password" }}
            className="absolute top-0 end-0 p-3.5 rounded-e-md dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
          >
            <svg
              className="flex-shrink-0 w-3.5 h-3.5 text-gray-400 dark:text-neutral-600"
              width={24}
              height={24}
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth={2}
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <path
                className="hs-password-active:hidden"
                d="M9.88 9.88a3 3 0 1 0 4.24 4.24"
              />
              <path
                className="hs-password-active:hidden"
                d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"
              />
              <path
                className="hs-password-active:hidden"
                d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"
              />
              <line
                className="hs-password-active:hidden"
                x1={2}
                x2={22}
                y1={2}
                y2={22}
              />
              <path
                className="hidden hs-password-active:block"
                d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"
              />
              <circle
                className="hidden hs-password-active:block"
                cx={12}
                cy={12}
                r={3}
              />
            </svg>
          </button>
        </div>
      </div>
      {/* End Form Group */}
    </>
  )
}

关键说明 #

• React会自动将驼峰式的dataHsTogglePassword转换为原生HTML的data-hs-toggle-password属性，并正确序列化JS对象为JSON字符串，避免手动字符串化的格式错误
• 调用HSStaticMethods.autoInit()是因为动态导入preline后，需要手动触发组件初始化，否则Preline无法检测到React渲染后的DOM元素
• 给useEffect添加空依赖数组，避免组件每次渲染都重复导入和初始化，提升性能

内容的提问来源于stack exchange，提问作者Azam M