Let's fix your reusable button component step by step, so you can render multiple instances with custom styles and handle hover/click state changes properly for your login module.

1. 重构按钮组件（函数组件版本，更简洁易维护） #

我们把按钮做成一个独立、可配置的组件，它能接收基础样式、悬停样式、点击样式以及点击回调，内部用React Hooks管理交互状态，确保样式变化能触发组件重渲染。

import React, { useState } from 'react';
import './Buttons.css';

const CustomButton = ({ 
  label, 
  baseStyle = {}, 
  hoverStyle = {}, 
  pressedStyle = {}, 
  onClick 
}) => {
  const [isPressed, setIsPressed] = useState(false);
  const [isHovered, setIsHovered] = useState(false);

  // 合并样式：优先级 点击样式 > 悬停样式 > 基础样式
  const getCurrentStyle = () => {
    if (isPressed) {
      return { ...baseStyle, ...pressedStyle };
    }
    if (isHovered) {
      return { ...baseStyle, ...hoverStyle };
    }
    return baseStyle;
  };

  return (
    <button
      className="custom-button"
      style={getCurrentStyle()}
      onClick={(e) => {
        setIsPressed(!isPressed);
        onClick?.(e); // 调用父组件传递的点击回调
      }}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      {label}
    </button>
  );
};

export default CustomButton;

2. 编写全局基础CSS（优化样式复用） #

在Buttons.css中添加通用样式，减少内联代码重复，同时让交互更平滑：

.custom-button {
  font: inherit;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease; /* 让样式切换有过渡动画 */
}

3. 重构App组件，批量渲染自定义按钮 #

现在可以在App中定义按钮配置数组，循环渲染多个按钮，每个按钮都能设置独立的样式：

import React, { Component } from 'react';
import CustomButton from './CustomButton';

class App extends Component {
  // 统一管理按钮配置：每个按钮包含标签、自定义样式
  state = {
    buttons: [
      {
        label: 'Login',
        baseStyle: { backgroundColor: '#007bff', color: 'white' },
        hoverStyle: { backgroundColor: '#0056b3' },
        pressedStyle: { backgroundColor: '#004085', transform: 'scale(0.98)' }
      },
      {
        label: 'Sign Up',
        baseStyle: { backgroundColor: '#28a745', color: 'white' },
        hoverStyle: { backgroundColor: '#218838' },
        pressedStyle: { backgroundColor: '#1e7e34', transform: 'scale(0.98)' }
      },
      {
        label: 'Forgot Password',
        baseStyle: { backgroundColor: '#ffc107', color: '#212529' },
        hoverStyle: { backgroundColor: '#e0a800' },
        pressedStyle: { backgroundColor: '#d39e00', transform: 'scale(0.98)' }
      }
    ]
  };

  // 父组件的点击回调（用于处理登录/注册逻辑）
  handleButtonClick = (label) => {
    console.log(`Button triggered: ${label}`);
    // 这里可以添加登录/注册的业务逻辑
  };

  render() {
    return (
      <div className="App" style={{ padding: '20px', gap: '10px', display: 'flex' }}>
        {this.state.buttons.map((btn, index) => (
          <CustomButton
            key={index} // 生产环境建议用唯一ID，这里用index临时替代
            label={btn.label}
            baseStyle={btn.baseStyle}
            hoverStyle={btn.hoverStyle}
            pressedStyle={btn.pressedStyle}
            onClick={() => this.handleButtonClick(btn.label)}
          />
        ))}
      </div>
    );
  }
}

export default App;

关键改进点说明 #

• 组件复用性：通过props传递样式和标签，每个按钮可完全自定义，完美适配登录模块的不同操作按钮
• 状态管理：用组件内部的useState管理点击/悬停状态，确保状态变化会触发React重渲染（解决了你之前用var管理状态不生效的问题）
• 样式优先级：点击样式 > 悬停样式 > 基础样式，符合用户交互的预期逻辑
• 批量渲染：用数组循环渲染按钮，避免重复代码，后续添加新按钮只需在state里追加配置即可

如果你偏好Class组件风格的按钮 #

这里提供Class版本的按钮组件，用法和函数组件完全一致：

import React, { Component } from 'react';
import './Buttons.css';

class CustomButtonClass extends Component {
  state = {
    isPressed: false,
    isHovered: false
  };

  getCurrentStyle = () => {
    const { baseStyle, hoverStyle, pressedStyle } = this.props;
    if (this.state.isPressed) {
      return { ...baseStyle, ...pressedStyle };
    }
    if (this.state.isHovered) {
      return { ...baseStyle, ...hoverStyle };
    }
    return baseStyle;
  };

  render() {
    const { label, onClick } = this.props;
    return (
      <button
        className="custom-button"
        style={this.getCurrentStyle()}
        onClick={(e) => {
          this.setState(prev => ({ isPressed: !prev.isPressed }));
          onClick?.(e);
        }}
        onMouseEnter={() => this.setState({ isHovered: true })}
        onMouseLeave={() => this.setState({ isHovered: false })}
      >
        {label}
      </button>
    );
  }
}

export default CustomButtonClass;

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