ক্লাস-ভিত্তিক OOP (JavaScript Classes and OOP পাঠ) থেকে আসার সময়, কম্পোনেন্ট জুড়ে আচরণ পুনঃব্যবহার করা হয়তো ইনহেরিটেন্সের কথা মনে করাতে পারে — একটি কম্পোনেন্ট আরেকটিকে extend করছে। React ইচ্ছাকৃতভাবে সেভাবে কাজ করে না; কম্পোজিশন, অন্য কম্পোনেন্ট দিয়ে কম্পোনেন্ট তৈরি করা, মোটামুটি সবকিছুর জন্য idiomatic পদ্ধতি।
Props পাঠের children প্রপ মূল কম্পোজিশন টুল — একটি wrapper কম্পোনেন্ট যার ভেতরে কী আছে তা নিয়ে কিছু জানার দরকার নেই:
function Card({ children }) {
return <div className="card">{children}</div>;
}
function App() {
return (
<Card>
<h2>Title</h2>
<p>Any content at all can go here.</p>
</Card>
);
}Card এটা একটি প্যারাগ্রাফ মোড়ায়, একটি ফর্ম, বা সম্পূর্ণ আরেকটি কম্পোনেন্ট — একইভাবে কাজ করে — এটা কখনো জানার দরকার হয়নি।
একটি কম্পোনেন্টের একাধিক আলাদা কন্টেন্ট এরিয়া দরকার হলে, সাধারণ props-এর মাধ্যমে (শুধু children নয়) JSX পাস করা এটা কভার করে — শুধু স্ট্রিং আর সংখ্যা নয়, যেকোনো প্রপ JSX ধরে রাখতে পারে:
function SplitPanel({ left, right }) {
return (
<div style={{ display: 'flex' }}>
<div>{left}</div>
<div>{right}</div>
</div>
);
}
function App() {
return (
<SplitPanel
left={<Sidebar />}
right={<MainContent />}
/>
);
}একটি বেশি নির্দিষ্ট কম্পোনেন্ট extend না করে একটি বেশি সাধারণ কম্পোনেন্ট মুড়িয়ে তৈরি করা যায়:
function Dialog({ title, children }) {
return (
<div className="dialog">
<h2>{title}</h2>
{children}
</div>
);
}
function WelcomeDialog() {
return (
<Dialog title="Welcome!">
<p>Thanks for signing up.</p>
</Dialog>
);
}ক্লাস-স্টাইল hierarchy-র চেয়ে কম্পোজিশন প্রাধান্য দিন
একটি বেস কম্পোনেন্ট আর এর বেশ কয়েকটি প্রায়-অভিন্ন ভ্যারিয়েন্ট চাইলে, একটি সাধারণ কম্পোনেন্টের চারপাশে একটি নির্দিষ্ট কম্পোনেন্ট কম্পোজ করা (উপরের মতো) React-এ প্রায় সবসময় একটি ক্লাস hierarchy-র চেয়ে যুক্তি করা সহজ — ট্রেস করার মতো parent আচরণের কোনো চেইন নেই, শুধু কম্পোনেন্ট কম্পোনেন্ট কল করছে।