如何通过Props条件性添加或移除组件的Hover效果？

核心思路是给组件添加自定义Prop，通过判断Prop的值决定是否加载hover相关样式逻辑，下面用主流的React和Vue框架分别举例说明：

React 实现示例 #

1. 定义组件并处理Prop #

import React from 'react';
import './Button.css';

const Button = ({ hover = true, children, ...rest }) => {
  // 自定义规则：hover为"disabled"或false时禁用hover效果
  const enableHover = hover !== 'disabled' && hover !== false;
  // 拼接条件类名
  const btnClass = `base-btn ${enableHover ? 'hover-active' : ''}`;

  return (
    <button className={btnClass} {...rest}>
      {children}
    </button>
  );
};

export default Button;

2. 编写对应CSS样式 #

.base-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.hover-active:hover {
  background-color: #f0f0f0;
  transition: background-color 0.2s ease;
}

使用方式 #

• 默认启用hover：<Button>普通按钮</Button>
• 禁用hover：<Button hover="disabled">无hover效果按钮</Button> 或 <Button hover={false}>无hover效果按钮</Button>

Vue 3 实现示例 #

1. 单文件组件代码 #

<template>
  <button 
    :class="['base-btn', { 'hover-active': enableHover }]"
    v-bind="$attrs"
  >
    <slot></slot>
  </button>
</template>

<script setup>
import { computed } from 'vue';

// 定义Prop，支持布尔值或特定字符串
const props = defineProps({
  hover: {
    type: [Boolean, String],
    default: true
  }
});

// 计算是否启用hover的状态
const enableHover = computed(() => {
  return props.hover !== 'disabled' && props.hover !== false;
});
</script>

<style scoped>
.base-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.hover-active:hover {
  background-color: #f0f0f0;
  transition: background-color 0.2s ease;
}
</style>

使用方式 #

• 默认启用hover：<Button>普通按钮</Button>
• 禁用hover：<Button hover="disabled">无hover效果按钮</Button> 或 <Button :hover="false">无hover效果按钮</Button>

核心逻辑总结 #

1. 给组件声明hover Prop，支持布尔值或约定的字符串（比如"disabled"），并设置默认值为启用状态
2. 根据Prop值计算出enableHover状态变量，判断规则可按需调整
3. 通过条件类名（推荐）或内联样式的方式，控制hover相关CSS规则是否生效

内容的提问来源于stack exchange，提问作者Tchaly Leandre Jr.