~~~ 一個高階組件（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; ~~~