React 中的高阶组件 (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></wrappedcomponent>
</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></enhancedmycomponent>;
}

export default App;