ReactIntermediate

Children ও Advanced Props

children pattern, element-as-prop ও composition প্যাটার্ন — বাংলায়।

5টি অংশবাংলা ভাষায়

Children pattern

Compositionjsx

jsx

function Modal({ title, children, footer }) {
  return (
    <div className="modal">
      <h2>{title}</h2>
      <div className="modal-body">{children}</div>
      <footer>{footer}</footer>
    </div>
  );
}

<Modal
  title="Delete?"
  footer={<button className="danger">Confirm</button>}
>
  <p>আপনি কি নিশ্চিত?</p>
</Modal>

Element as prop

Flexible layoutjsx

jsx

function Card({ header, body }) {
  return (
    <section>
      <header>{header}</header>
      <div>{body}</div>
    </section>
  );
}

<Card
  header={<Avatar user={user} />}
  body={<UserName user={user} />}
/>

Composition শ্রেষ্ঠ

Props দিয়ে complex children পাঠাতে হলে composition (children/footer props) সবচেয়ে পরিষ্কার। ভেতরের যেকোনো element বাইরে জেনে-রেখে render করলে coupling বাড়ে।

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।