使用共享mouseOver处理程序的React Component

Question

我有一个包含SVG 1.1规范rect标记的简单反应组件，并添加了一些默认值，如下所示：

import React, { Component } from 'react';

const defaults = {
  x: 100,
  y: 100,
  width: 200,
  height: 100,
  rx: 0,
  ry: 0,
};

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

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

我正在尝试找到一个添加mouseOver函数的好方法，但是希望以一种可以与其他类似组件重用的方式来实现。

我查看了高阶组件，但是当我尝试设置状态时遇到了麻烦，因为状态不是上述组件状态的一部分。