以下是一個簡單的高階組件示例,用于在傳入組件中添加鼠標移入事件的功能:
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 的一部分。因此,可以根據實際需要自定義和設計高階組件,根據不同的場景和需求來實現組件的復用和增強。