Determine component type

With react it's possible to tag a component with a type:

<Card withBorder>
   <Card.Section inheritPadding py="md" withBorder>
      Card section 1
   </Card.Section>
   ...
</Card>

<Card withBorder>
   <Card.Section inheritPadding py="md" withBorder>
      Card section 1
   </Card.Section>
   ...
</Card>

In the card component:

Card.Section = CardSection;

Card.Section = CardSection;

Now I can find that Card.Section, again in card component:

if (typeof child === 'object' && child && 'type' in child && child.type === CardSection) {

if (typeof child === 'object' && child && 'type' in child && child.type === CardSection) {

Unfortunately, it doesn't seem possible with solidjs.

What I have done to determine whether a component is a Card.Section. Within CardSection.tsx

<Box
      ref={ref}
      mod={[{ 'with-border': local.withBorder, 'inherit-padding': local.inheritPadding, 'card-section': true }, local.mod]}

<Box
      ref={ref}
      mod={[{ 'with-border': local.withBorder, 'inherit-padding': local.inheritPadding, 'card-section': true }, local.mod]}

I'm setting:

'card-section': true

'card-section': true

Then to find it:

if ((item as any)?.dataset?.cardSection === 'true') {

if ((item as any)?.dataset?.cardSection === 'true') {

But is there a more idiomatic way?

SolidJS•11mo ago•

15 replies