พื้นฐาน props.children

ยินดีต้อนรับ

พร็อพองค์ประกอบลูก

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

// Usage
<Card><p>Hello world</p></Card>

องค์ประกอบลูกเดียวเทียบกับหลายองค์ประกอบลูก

<Card>One child</Card>          // children is a string
<Card><p>A</p><p>B</p></Card>  // children is an array

การแสดงผลองค์ประกอบลูกโดยตรง

function Section({ title, children }) {
  return (
    <section>
      <h2>{title}</h2>
      <div className="content">{children}</div>
    </section>
  );
}

การแสดงผลองค์ประกอบลูกตามเงื่อนไข

function Panel({ children }) {
  if (!children) return <p>Nothing to show</p>;
  return <div className="panel">{children}</div>;
}

องค์ประกอบลูกในฐานะพร็อพสำหรับเรนเดอร์

function DataLoader({ children }) {
  const data = useFetchData();
  return children(data); // consumer receives data
}

<DataLoader>{data => <ul>{data.map(...)}</ul>}</DataLoader>

การส่งองค์ประกอบลูกในฐานะพร็อพ

function Layout({ header, footer, children }) {
  return (
    <div>
      <header>{header}</header>
      <main>{children}</main>
      <footer>{footer}</footer>
    </div>
  );
}

องค์ประกอบลูกเริ่มต้น

function Button({ children = 'Click me' }) {
  return <button>{children}</button>;
}

แฟรกเมนต์และองค์ประกอบลูกหลายรายการ

function Row({ children }) {
  return <>{children}</>;
}

TypeScript: การกำหนดชนิดให้องค์ประกอบลูก

interface Props {
  children: React.ReactNode;
}

function Box({ children }: Props) {
  return <div>{children}</div>;
}

ตรวจสอบความเข้าใจ

สรุปทบทวน

ถัดไป