~~~ 一个高阶组件（Higher-Order Component，简称HOC）是React中的一个深入概念，它是一个函数，用于接收一个组件并返回一个新组件 ~~~ 接收一个组件，返回一个组件 const A=(Component)=>{return (props)=>{return(<div><Component {...props}/> </div>)} export default C=A(D) //D为外部组件也可导出A，然后引入的时候是import {A} from '...';cosnt C = A(D) 起到一个参数传递的作用，使两个组件公用一套props ~~~ import React, { useState } from 'react'; import CardContainer from '../CardContainer' const HoverOverlay = (WrappedComponent) =>{ return (props)=> { // 使用useState hook来管理hover状态 const [hover, setHover] = useState(false); const onMouseEnter = () => setHover(true); const onMouseLeave = () => setHover(false); return ( <div onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} style={{ position: 'relative' }} > <WrappedComponent {...props} /> {hover && ( <div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: 'rgba(0, 0, 0, 0.5)', display: 'flex', justifyContent: 'center', alignItems: 'center', }} > {/* 这里添加你的操作按钮 */} <button style={{ padding: '10px', margin: '5px' }}>按钮1</button> <button style={{ padding: '10px', margin: '5px' }}>按钮2</button> {/* 你可以根据需要增加更多的按钮 */} </div> )} </div> ); }; } const HoverCardComponent = HoverOverlay(CardContainer); export default HoverCardComponent; ~~~