How to render children in Qwik?

Question

In React, I had this component:

const Title = ({ children }) => {
    return <h2>{children}</h2>
}

export default Title

And I could easily use it as <Title>Something</Title>

In Qwik, I can create the same component:

import { component$ } from '@builder.io/qwik'

const Title = component$(({ children }) => {
    return <h2>{children}</h2>
})

export default Title

But <Title>Something</Title> does not work. Even <Title children='Something' /> does not work. But if I change the prop name to text, then <Title text='Something' /> works.

However, the ability to nest components and reuse them under a special name is a must in real-world applications.

How can I render children in Qwik?

Answer 1

Qwik 使用 Slot 代替孩子

import { component$, Slot } from '@builder.io/qwik'

const Title = component$(() => {
    return <h2><Slot /></h2>
})

export default Title

请参阅https://qwik.builder.io/docs/components/projection/