React按钮代码不符合DRY原则如何优化？新手求助精简重复代码方案

嘿，作为React新手能写出功能正常的hover按钮已经很棒啦！先回答你的两个核心问题：

当前重复写法是否可行？ #

完全可行！只要功能正常运行，这种写法本身没有错误。但它的问题在于冗余度高：每加一个按钮就要写两个重复逻辑的函数，后续要修改hover样式或逻辑时，得同时改多个地方，维护成本会越来越高，不符合DRY（Don't Repeat Yourself）原则，所以非常有必要优化。

优化方案：两种思路让代码更简洁 #

思路1：用单个函数动态处理所有按钮（适合需要JS逻辑的场景） #

如果hover时除了改样式还要执行其他JS操作（比如日志、状态联动），可以把按钮标识作为参数传给通用函数，动态修改对应按钮的状态：

1. 重构state：用一个对象统一管理所有按钮的样式状态
2. 写两个通用函数：handleHover和handleHoverOut，接收按钮名称作为参数
3. 渲染按钮时传入对应的标识

export default class SelectableOption1 extends React.Component {
  constructor() {
    super();
    this.state = {
      // 用对象统一管理所有按钮的样式状态
      buttonStyles: {
        btnOne: {},
        btnTwo: {},
        btnThree: {},
        btnFour: {}
      }
    };
    // 绑定this（也可以用类字段箭头函数替代）
    this.handleHover = this.handleHover.bind(this);
    this.handleHoverOut = this.handleHoverOut.bind(this);
  }

  // 通用hover处理函数，接收按钮名称
  handleHover(btnName) {
    this.setState(prevState => ({
      buttonStyles: {
        ...prevState.buttonStyles,
        [btnName]: { 
          backgroundColor: 'rgba(27, 209, 255)', 
          color: '#fff' 
        }
      }
    }));
  }

  // 通用hover离开处理函数
  handleHoverOut(btnName) {
    this.setState(prevState => ({
      buttonStyles: {
        ...prevState.buttonStyles,
        [btnName]: {} // 重置为默认样式，也可以写默认样式对象
      }
    }));
  }

  render() {
    const { buttonStyles } = this.state;
    return (
      <div>
        <button 
          style={buttonStyles.btnOne}
          onMouseEnter={() => this.handleHover('btnOne')}
          onMouseLeave={() => this.handleHoverOut('btnOne')}
        >按钮1</button>
        <button 
          style={buttonStyles.btnTwo}
          onMouseEnter={() => this.handleHover('btnTwo')}
          onMouseLeave={() => this.handleHoverOut('btnTwo')}
        >按钮2</button>
        {/* 按钮3、4直接复用相同逻辑即可 */}
        <button 
          style={buttonStyles.btnThree}
          onMouseEnter={() => this.handleHover('btnThree')}
          onMouseLeave={() => this.handleHoverOut('btnThree')}
        >按钮3</button>
        <button 
          style={buttonStyles.btnFour}
          onMouseEnter={() => this.handleHover('btnFour')}
          onMouseLeave={() => this.handleHoverOut('btnFour')}
        >按钮4</button>
      </div>
    );
  }
}

思路2：用CSS伪类实现hover（最简洁的纯样式场景） #

如果hover只是单纯的样式变化，优先用CSS解决——这是前端的最佳实践，完全不需要写JS函数，代码最简洁：

1. 定义CSS类，用:hover伪类写hover样式
2. 按钮直接复用这个类即可

/* 可以放在组件的CSS文件里 */
.hover-button {
  /* 按钮默认样式 */
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease; /* 加过渡动画让hover更流畅 */
}

.hover-button:hover {
  background-color: rgba(27, 209, 255);
  color: #fff;
}

export default class SelectableOption1 extends React.Component {
  render() {
    return (
      <div>
        <button className="hover-button">按钮1</button>
        <button className="hover-button">按钮2</button>
        <button className="hover-button">按钮3</button>
        <button className="hover-button">按钮4</button>
      </div>
    );
  }
}

这种方式不仅代码最少，而且性能更好，因为CSS hover是浏览器原生支持的，不需要JS介入。

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