Mastering الگوهای طراحی React: HOC ، غرفه های ارائه شده و اجزای مرکب

import React from "react";

// Higher-Order Component
function withLogger(WrappedComponent) {
  return function EnhancedComponent(props) {
    console.log(`Component ${WrappedComponent.name} rendered!`);
    return <WrappedComponent {...props} />;
  };
}

// Regular Component
function Button({ label }) {
  return <button>{label}</button>;
}

// Enhanced Component
const ButtonWithLogger = withLogger(Button);

export default function App() {
  return <ButtonWithLogger label="Click Me" />;
}

import React, { useState } from "react";

// Component using Render Props
function MouseTracker({ render }) {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  const handleMouseMove = (event) => {
    setPosition({ x: event.clientX, y: event.clientY });
  };

  return <div onMouseMove={handleMouseMove}>{render(position)}</div>;
}

// Using MouseTracker in App
export default function App() {
  return (
    <MouseTracker
      render={({ x, y }) => (
        <h2>
          Mouse Position: ({x}, {y})
        </h2>
      )}
    />
  );
}

import React, { useState } from "react";

function Tabs({ children }) {
  const [activeIndex, setActiveIndex] = useState(0);

  return React.Children.map(children, (child, index) => {
    if (child.type === TabList) {
      return React.cloneElement(child, { activeIndex, setActiveIndex });
    }
    if (child.type === TabPanel) {
      return activeIndex === index - 1 ? child : null; // Only show active panel
    }
    return child;
  });
}

function TabList({ children, activeIndex, setActiveIndex }) {
  return React.Children.map(children, (child, index) =>
    React.cloneElement(child, {
      isActive: activeIndex === index,
      onClick: () => setActiveIndex(index),
    })
  );
}

function Tab({ children, isActive, onClick }) {
  return (
    <button onClick={onClick} style={{ fontWeight: isActive ? "bold" : "normal" }}>
      {children}
    </button>
  );
}

function TabPanel({ children }) {
  return <div>{children}</div>;
}

// Usage
export default function App() {
  return (
    <Tabs>
      <TabList>
        <Tab>Tab 1</Tab>
        <Tab>Tab 2</Tab>
      </TabList>
      <TabPanel>Content of Tab 1</TabPanel>
      <TabPanel>Content of Tab 2</TabPanel>
    </Tabs>
  );
}