Component Patterns

Basic Component

คอมโพเนนต์พื้นฐานใน React

function Greeting() {
  return <h1>Hello, World!</h1>;
}

Component with Props

คอมโพเนนต์ที่รับค่าผ่าน props

interface GreetingProps {
  name: string;
}

function Greeting({ name }: GreetingProps) {
  return <h1>Hello, {name}!</h1>;
}

Component Composition

เทคนิคการประกอบคอมโพเนนต์เข้าด้วยกัน

function Card({ children }: { children: React.ReactNode }) {
  return <div className="card">{children}</div>;
}

function App() {
  return (
    <Card>
      <Greeting name="John" />
    </Card>
  );
}

Scoped Slots

Scoped Slots เป็นรูปแบบการส่งข้อมูลจาก parent component ไปยัง child component โดยให้ child component ควบคุมการเรนเดอร์

function UserList(
  { users, children }: { users: User[]; children: (user: User) => ReactNode },
) {
  return (
    <ul>
      {users.map((user) => <li key={user.id}>{children(user)}</li>)}
    </ul>
  );
}

// การใช้งาน
<UserList users={users}>
  {(user) => (
    <div>
      <h3>{user.name}</h3>
      <p>{user.email}</p>
    </div>
  )}
</UserList>;

ตัวอย่างด้านบนแสดงให้เห็นว่า:

1. UserList component รับ prop children เป็นฟังก์ชัน
2. ฟังก์ชันนี้จะรับพารามิเตอร์เป็น user และ return JSX
3. Parent component สามารถควบคุมการแสดงผลของแต่ละ user ได้