Composition Component Composition
Last updated: 2026-11-02
Composition Component Composition
React recommends composition rather than inheritance for reusing components: the parent passes JSX in as children or as a custom prop, a generic container such as Card, Layout or Modal decides where that JSX goes, and the caller decides what it contains. Children is therefore the most natural slot mechanism of them all. The container stays ignorant of the content it renders, so the same frame can host a form, a chart or a paragraph without ever knowing which one it is showing.
| Group | Component Patterns |
|---|---|
| Kind | Pattern |
ℹ️ Info The editor transpiles JSX to JavaScript and renders the real UI in a sandbox; components mount automatically — no manual render call needed.
📝 Syntax
function Card({ children, footer }) {
return (
<div className="card">
<div>{children}</div> {/* the main content slot */}
<div>{footer}</div> {/* a custom slot prop */}
</div>
)
}
// usage: <Card footer={<small>2026</small>}><p>Body text</p></Card>Returns：No return value; this entry describes an encoding pattern rather than a function.
▶ Example
The example runs out of the box: it auto-renders when expanded, and edits take effect instantly.
Output：
Two titled card panels whose content is supplied by the caller through children — Panel only owns the frame and never cares about the structure inside.💡 Key Points
🏷️ More Component Patterns
💡 Related Cases
📚 Related Tutorials
❓ FAQ
