如何用变量设置HTML属性 实现重复元素属性复用精简代码

纯原生HTML本身没有内置的属性变量引用能力，但结合你代码里的className、style={{}}语法判断，你当前是在React类的JSX环境下开发，有非常简便的实现方式，纯原生场景也有对应的批量处理方案：

1. JSX环境：属性对象+展开运算符（零依赖，改造成本最低） #

直接把所有通用属性抽成一个公共对象，使用时通过JSX的展开运算符把属性透传给元素即可，单个元素只需要写差异化的内容（比如按钮文字、单独的事件、需要覆盖的个别属性）。

代码示例 #

首先在公共位置定义通用属性集合：

// 可单独抽成公共文件导出，所有业务页面都能引用
const dropdownBtnCommonProps = {
  className: 'btn btn-secondary dropdown-toggle',
  style: { margin: "5px" },
  type: 'button',
  'data-bs-toggle': 'dropdown',
  'aria-expanded': 'false'
}

在需要用按钮的地方直接复用：

{/* 完全复用默认属性 */}
<button {...dropdownBtnCommonProps}>Delete</button>

{/* 复用默认属性，追加点击事件 */}
<button {...dropdownBtnCommonProps} onClick={handleEdit}>Edit</button>

{/* 覆盖个别默认属性，比如修改边距 */}
<button {...dropdownBtnCommonProps} style={{ margin: "10px" }}>Custom Margin</button>

• 注意：展开运算符后面写的属性优先级更高，会覆盖前面公共对象里的同名属性，满足个别元素的定制需求。

2. 长期维护场景：封装通用组件 #

如果这类按钮后续还会迭代（比如加统一图标、加点击埋点、调整默认样式），直接封装成独立组件的可维护性更高：

// 通用组件定义
function DropdownButton({ children, ...rest }) {
  return (
    <button
      className='btn btn-secondary dropdown-toggle'
      style={{ margin: "5px" }}
      type='button'
      data-bs-toggle='dropdown'
      'aria-expanded='false'
      {...rest}
    >
      {children}
    </button>
  )
}

// 使用时和普通按钮用法一致
<DropdownButton onClick={handleDelete}>Delete</DropdownButton>
<DropdownButton disabled>Disabled Action</DropdownButton>

后续如果要修改所有同类按钮的属性，只需要改组件这一处代码，所有引用的地方都会自动生效。

3. 纯原生HTML无框架场景 #

如果是没有构建工具的原生HTML项目，可以通过JS批量给目标元素赋值属性：

<script>
document.addEventListener('DOMContentLoaded', () => {
  // 给所有带common-dropdown-btn类的按钮统一设置属性
  document.querySelectorAll('.common-dropdown-btn').forEach(btn => {
    btn.className = 'btn btn-secondary dropdown-toggle';
    btn.style.margin = '5px';
    btn.type = 'button';
    btn.setAttribute('data-bs-toggle', 'dropdown');
    btn.setAttribute('aria-expanded', 'false');
  })
})
</script>

<!-- HTML部分只需要加标记类，不需要重复写所有属性 -->
<button class="common-dropdown-btn">Delete</button>
<button class="common-dropdown-btn">Edit</button>

• 这个方案的缺点是JS加载完成前按钮会显示默认样式，存在短暂闪烁，非原生场景不推荐使用。

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