高阶组件中添加事件功能的示例

　　以下是一个简单的高阶组件示例，用于在传入组件中添加鼠标移入事件的功能：　　

import React from 'react';

function withMouseHover(Component) {
  return class extends React.Component {
    handleMouseHover = () => {
      console.log('Mouse hovered');
    };

    render() {
      return (
        <div onMouseEnter={this.handleMouseHover}>
          <Component {...this.props} />
        </div>
      );
    }
  };
}

function MyComponent(props) {
  return <div>My Component</div>;
}

const MyComponentWithMouseHover = withMouseHover(MyComponent);

// 使用高阶组件包装后的组件
<MyComponentWithMouseHover />;

　　在上述示例中，withMouseHover 是一个高阶组件，它接受一个组件作为参数，并返回一个新的包装组件。在返回的包装组件中，添加了鼠标移入事件的处理逻辑，并将传入的组件作为子组件渲染。

　　通过这种方式，我们可以实现在多个组件中添加鼠标移入事件的功能，而不需要在每个组件中重复编写相同的逻辑。

　　需要注意的是，高阶组件只是一种模式和约定，并不是 React API 的一部分。因此，可以根据实际需要自定义和设计高阶组件，根据不同的场景和需求来实现组件的复用和增强。