React+SCSS模块：如何自动将非哈希类名设为元素id/data属性？

针对React项目中SCSS模块类名哈希后，第三方无代码工具无法稳定定位元素的问题，以下是几种自动添加非哈希标识属性的可行方案：

方案一：自定义Babel构建插件（推荐） #

通过编写Babel插件，在构建阶段自动识别SCSS模块的类名引用，为对应JSX元素添加data-testid或id属性，无需手动修改JSX代码。

插件示例代码 #

创建babel-plugin-add-static-identifier.js文件：

module.exports = function({ types: t }) {
  return {
    visitor: {
      JSXAttribute(path) {
        // 匹配className属性，处理单一类名和多类名模板字符串场景
        if (path.node.name.name === 'className') {
          let rawClassNames = [];
          
          // 处理单一类名：className={styles.mobileMenuToggle}
          if (t.isMemberExpression(path.node.value.expression)) {
            rawClassNames.push(path.node.value.expression.property.name);
          }
          // 处理多类名模板字符串：className={`${styles.a} ${styles.b}`}
          else if (t.isTemplateLiteral(path.node.value.expression)) {
            path.node.value.expression.quasis.forEach(quasi => {
              quasi.expressions.forEach(expr => {
                if (t.isMemberExpression(expr)) {
                  rawClassNames.push(expr.property.name);
                }
              });
            });
          }

          // 为每个原始类名添加data-testid（可改为id）
          rawClassNames.forEach(name => {
            const hasExistingAttr = path.parent.attributes.some(attr => 
              attr.name.name === 'data-testid' && attr.value.value === name
            );
            if (!hasExistingAttr) {
              const testIdAttr = t.jsxAttribute(
                t.jsxIdentifier('data-testid'),
                t.stringLiteral(name)
              );
              path.parent.attributes.push(testIdAttr);
            }
          });
        }
      }
    }
  };
};

配置使用 #

在项目的babel.config.js中引入该插件：

module.exports = {
  presets: ['@babel/preset-react'],
  plugins: ['./babel-plugin-add-static-identifier']
};

构建后，所有使用SCSS模块类名的元素都会自动带上data-testid="原始类名"属性，示例：

<div className="Header_mobileMenuToggle__6n6-W" data-testid="mobileMenuToggle">...</div>

方案二：自定义Hook简化属性添加 #

如果不想编写Babel插件，可以用自定义Hook提取原始类名并生成标识属性，只需在JSX中展开即可。

Hook代码 #

import { useMemo } from 'react';

export function useStaticClassIdentifier(classNameString) {
  // 从SCSS模块生成的哈希类名中提取原始类名（格式：文件名_原始类名__哈希）
  const rawClassNames = classNameString.split(' ')
    .map(cn => cn.split('__')[0]?.split('_')[1])
    .filter(Boolean);
  
  return useMemo(() => ({
    // 若有多个类名，可改为自定义属性，这里取第一个作为标识
    'data-testid': rawClassNames[0]
  }), [classNameString]);
}

使用方式 #

import styles from './Header.module.scss';
import { useStaticClassIdentifier } from './hooks';

function Header() {
  const menuToggleAttrs = useStaticClassIdentifier(styles.mobileMenuToggle);
  
  return (
    <div className={styles.header}>
      <div className={styles.mobileMenuToggle} {...menuToggleAttrs}>
        菜单按钮
      </div>
    </div>
  );
}

方案三：高阶组件(HOC)封装组件 #

对于复用性高的组件，可以用HOC封装，自动注入标识属性。

HOC代码 #

import React from 'react';

export function withStaticIdentifier(Component, identifier) {
  return function WrappedComponent(props) {
    return <Component {...props} data-testid={identifier} />;
  };
}

使用方式 #

import styles from './Header.module.scss';
import { withStaticIdentifier } from './hocs';

// 封装组件
const MobileMenuToggle = withStaticIdentifier(({ className }) => (
  <div className={className}>菜单按钮</div>
), 'mobileMenuToggle');

// 在父组件中使用
function Header() {
  return (
    <div className={styles.header}>
      <MobileMenuToggle className={styles.mobileMenuToggle} />
    </div>
  );
}

内容的提问来源于stack exchange，提问作者LinusG.