2 ms·
Are you saying something like this?: function TwoColumn({ left, right }: { left: React.ReactNode; right: React.ReactNode }) { return ( <div classNa
by ninetyninenine 1y ago
Are you saying something like this?:
function TwoColumn({ left, right }: { left: React.ReactNode; right: React.ReactNode }) {
return (
<div className="grid grid-cols-[240px_1fr]">
<aside>{left}</aside>
<main>{right}</main>
</div>
);
}
// Flat usage
export function Dashboard() {
return (
<TwoColumn
left={<NavTree />} // could itself render nested <ul><li> DOM
right={<ContentArea />} // arbitrary component
/>
);
}
But this is just bundling the props on a component and using the component itself as a bundle to drill down.
- whstl 1y agoIt's not just this, but that's one technique. However this example has decoupled component hierarchy and HTML hierarchy. Which demonstrates they don't have to be coupled. > But this is just bundling the props on a component and using the component itself as a bundle to drill down. But there is no prop-drilling needed, as long as NavTree and ContentArea are also UI primitives. If you need NavTree and ContentArea to communicate with each other, for example, they're now siblings in the hierarchy, even though the HTML hierarchy is as deep as it needs to be for the design. Btw: If "NavTree" and "ContentArea" are not primitives, they're the kind of thing that breaks a flat hierarchy and require prop-drilling/context/redux/etc in the first place. This is where one would use configurable primitive components, rather than the "Clean Code"-style extracted code.