Is there a way to enforce children of a particular component type?

I'm wanting to make a component that only accepts children that are a specific component so for example:

// Valid
<CodeGroup>
  <Code label="Ctrl" />
  <Code label="M" />
</CodeGroup>

// Invalid
<CodeGroup>
  <div>hi</div>
</CodeGroup>

// Valid
<CodeGroup>
  <Code label="Ctrl" />
  <Code label="M" />
</CodeGroup>

// Invalid
<CodeGroup>
  <div>hi</div>
</CodeGroup>

I tried playing around with

FlowProps

FlowProps

and

FlowComponent

FlowComponent

but couldn't quite get it to work. I think I'm pretty close but I'm not sure how I can allow passing the result of calling <Code /> while also enforcing the children are of type

Code

Code

.

So as a prop,

items: (typeof Code)[]

items: (typeof Code)[]

for example allows me pass in

Code

Code

but not

<Code />

<Code />

SolidJS•2y ago•

9 replies

flippyflops

Is there a way to enforce children of a particular component type?

I'm wanting to make a component that only accepts children that are a specific component so for example:

// Valid
<CodeGroup>
  <Code label="Ctrl" />
  <Code label="M" />
</CodeGroup>

// Invalid
<CodeGroup>
  <div>hi</div>
</CodeGroup>

// Valid
<CodeGroup>
  <Code label="Ctrl" />
  <Code label="M" />
</CodeGroup>

// Invalid
<CodeGroup>
  <div>hi</div>
</CodeGroup>

I tried playing around with

FlowProps

FlowProps

and

FlowComponent

FlowComponent

but couldn't quite get it to work. I think I'm pretty close but I'm not sure how I can allow passing the result of calling <Code /> while also enforcing the children are of type

Code

Code

.

So as a prop,

items: (typeof Code)[]

items: (typeof Code)[]

for example allows me pass in

Code

Code

but not

<Code />

<Code />

Is there a way to enforce children of a particular component type?

Similar Threads

Is there a way to enforce children of a particular component type?

Similar Threads

Similar Threads

Similar Threads