React 中的高階元件 (HOC) 是採用元件並傳回具有增強功能的新元件的函數。它們允許您跨多個元件重複使用邏輯,而無需重複程式碼。
這是 HOC 的基本範例:
import React from 'react'; // A Higher-Order Component function withExtraInfo(WrappedComponent) { return function EnhancedComponent(props) { return ( <div> <p>This is extra info added by the HOC!</p> <WrappedComponent {...props} /> </div> ); }; } // A regular component function MyComponent() { return <p>This is my component!</p>; } // Wrap the component with the HOC const EnhancedMyComponent = withExtraInfo(MyComponent); function App() { return <EnhancedMyComponent />; } export default App;
雖然 HOC 在引入 React hooks 之前更常用,但它們在許多情況下仍然有用。
以上是React 中的高階元件 (HOC)的詳細內容。更多資訊請關注PHP中文網其他相關文章!