Open
Description
🧐 Problem Description
Here's a lovely piece of code ,<Container.Chart/>expect to get a function but who is not in props，
<Container class="w-full col-span-6 h-450px <md:col-span-12">
<Container.Title>
some title
</Container.Title>
<Container.Chart >
{console.log}
</Container.Chart>
</Container>as you can see, both the<Container.Title/> and the <Container.Chart/> area are displayed in their respective areas,
<Container.Chart/> is designed as a provider that passes instances to the slot after it has mounted.
💻 Sample code
here's how I implemented the solidified layout, everything is functional
const FC = <P = {}, E extends EmitsOptions = {}, S extends Record<string, unknown> = {}>(fc: FunctionalComponent<P & { children: VNode[], find: (component: FunctionalComponent)=>VNode }, E, S>)=>{
return Object.assign((props: any, context: any) => {
const children = context?.slots?.default?.()||[];
const childrenMap: Map<Component, VNode> = children.reduce(((map: any, child: any) => map.set(child.type, child)), new Map())
const find = (componnet: any) => childrenMap.get(componnet)
return fc(Object.assign(props, { children: context?.slots?.default?.(), find }), context)
}, { displayName: fc.name ||"anonymous" })
}
const Container=FC((props=>{
const title = props.find(Title)
const params = props.find(Params)
const chart = props.find(Chart as unknown as any)
const chartArea = props.find(ChartArea)
return <div class="bg-white flex flex-col">
{(title || params)&&<div class="px-20px py-10px w-full flex flex-row flex-0 items-center justify-between border-b border-gray-200">
{title && <div class="font-bold">
{title}
</div>}
{params&&<div class="w-full">
{params}
</div>}
</div>}
{chart &&<div class="w-full p-20px flex-1" >
{chart}
</div>}
{chartArea &&<div class="w-full p-20px flex-1" >
{chartArea}
</div>}
</div>
}))
const Title = FC(({ children }) => children)🚑 Other information
No matter how I pass the argument in context.slots.default in FunctionalComponent, it doesn't get passed into the following console.log
<Container.Chart >
{console.log}
</Container.Chart>