如何为可复用React SVG组件添加共享mouseOver处理函数？

针对你遇到的HOC状态归属问题，我整理了几种既可以复用mouseOver逻辑，又能避免状态冲突的可行方案，你可以根据项目场景选择：

1. 自定义Hook（推荐，函数组件优先） #

如果可以把你的类组件改成函数组件，自定义Hook是目前React里最清爽的逻辑复用方式——它把鼠标悬停的逻辑完全抽离，返回状态和事件处理函数，任何组件都能直接引入使用。

先改造你的Rectangle组件，再写一个通用的useMouseHover Hook：

import React, { useState } from 'react';

// 通用鼠标悬停Hook：所有需要悬停逻辑的组件都能复用
const useMouseHover = () => {
  const [isHovered, setIsHovered] = useState(false);

  const handleMouseOver = () => setIsHovered(true);
  const handleMouseOut = () => setIsHovered(false);

  // 返回状态和事件处理器，组件按需取用
  return {
    isHovered,
    hoverHandlers: {
      onMouseOver: handleMouseOver,
      onMouseOut: handleMouseOut
    }
  };
};

// 默认配置
const defaults = { x: 100, y: 100, width: 200, height: 100, rx: 0, ry: 0 };

// 函数式Rectangle组件
const Rectangle = (props) => {
  const { isHovered, hoverHandlers } = useMouseHover();
  // 合并默认配置、用户props和悬停事件处理器
  const rectProps = { ...defaults, ...props, ...hoverHandlers };

  // 这里可以根据isHovered做任何状态调整，比如动态改颜色
  if (isHovered) {
    rectProps.fill = rectProps.fill || '#ffeb3b'; // 悬停时的默认填充色，用户传的话会覆盖
  }

  return (
    <rect {...rectProps}>
      {props.children}
    </rect>
  );
};

export default Rectangle;

其他SVG组件比如Circle、Line，只要引入useMouseHover就能获得同样的悬停能力，完全不需要重复写逻辑。

2. 改进高阶组件（HOC）写法（兼容类组件） #

你之前用HOC踩坑，大概率是因为试图直接修改被包装组件的内部状态。正确的做法是让HOC自己管理悬停状态，再通过props把状态和事件处理器传递给被包装组件——这样就不会出现“目标状态不属于当前组件”的问题。

import React, { Component } from 'react';

// 通用悬停HOC：给任意组件添加悬停逻辑
const withMouseHover = (WrappedComponent) => {
  return class WithMouseHover extends Component {
    state = {
      isHovered: false
    };

    handleMouseOver = () => {
      this.setState({ isHovered: true });
      // 兼容用户自己传的onMouseOver
      this.props.onMouseOver?.();
    };

    handleMouseOut = () => {
      this.setState({ isHovered: false });
      // 兼容用户自己传的onMouseOut
      this.props.onMouseOut?.();
    };

    render() {
      // 把悬停状态和事件处理器传给被包装组件
      return (
        <WrappedComponent
          {...this.props}
          isHovered={this.state.isHovered}
          onMouseOver={this.handleMouseOver}
          onMouseOut={this.handleMouseOut}
        />
      );
    }
  };
};

// 你的原Rectangle组件（不需要修改内部状态逻辑）
const defaults = { x: 100, y: 100, width: 200, height: 100, rx: 0, ry: 0 };

class Rectangle extends Component {
  constructor(props) {
    super(props);
    this.state = {
      ...defaults,
      ...props
    };
  }

  render() {
    const { isHovered, ...restProps } = this.props;
    // 根据HOC传递的isHovered调整属性，比如改边框颜色
    const rectProps = {
      ...this.state,
      stroke: isHovered ? '#f44336' : '#000',
      ...restProps
    };

    return (
      <rect {...rectProps}>
        {this.props.children}
      </rect>
    );
  }
}

// 用HOC包装后导出，获得悬停能力
export default withMouseHover(Rectangle);

这样HOC负责管理悬停状态，被包装组件只需要接收props来使用状态，完美解决了之前的状态归属问题。其他类组件也可以用withMouseHover(YourComponent)快速复用逻辑。

3. 组合式容器组件（无侵入改造） #

如果你不想改动原有组件的代码，可以用组合的方式：写一个专门处理悬停的容器组件，把需要添加悬停逻辑的SVG组件作为子组件传进去，容器负责处理事件和状态，再把状态传递给子组件。

import React, { Component } from 'react';

// 悬停容器组件：无侵入给子组件加悬停逻辑
class MouseHoverWrapper extends Component {
  state = {
    isHovered: false
  };

  handleMouseOver = () => {
    this.setState({ isHovered: true });
    this.props.onMouseOver?.();
  };

  handleMouseOut = () => {
    this.setState({ isHovered: false });
    this.props.onMouseOut?.();
  };

  render() {
    // 克隆子组件，把悬停状态和事件处理器传进去
    return React.cloneElement(this.props.children, {
      isHovered: this.state.isHovered,
      onMouseOver: this.handleMouseOver,
      onMouseOut: this.handleMouseOut
    });
  }
}

// 你的原Rectangle组件（完全不需要修改）
const defaults = { x: 100, y: 100, width: 200, height: 100, rx: 0, ry: 0 };

class Rectangle extends Component {
  constructor(props) {
    super(props);
    this.state = {
      ...defaults,
      ...props
    };
  }

  render() {
    const { isHovered, ...restProps } = this.props;
    const rectProps = {
      ...this.state,
      fill: isHovered ? '#e3f2fd' : '#fff',
      ...restProps
    };

    return <rect {...rectProps}>{this.props.children}</rect>;
  }
}

// 使用方式：把Rectangle放到容器里就行
const HoverableRectangle = () => (
  <MouseHoverWrapper>
    <Rectangle />
  </MouseHoverWrapper>
);

export default HoverableRectangle;

这种方式完全不需要改动原有组件的代码，适合快速给现有组件添加悬停能力。

方案选择建议 #

• 如果你已经在用React Hooks，自定义Hook是最优解，逻辑清晰、代码简洁。
• 如果需要兼容类组件，改进后的HOC能完美解决你之前的状态问题。
• 不想改动原有组件的话，组合式容器是最无侵入的选择。

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