Vue 3 - how to return html from function?-CodePudding

I'm trying to use render functions with vue 3, and for some reasons i can't return my JSX directly in return () => [], but i need to return it from inside a function, and i was wondering if that's possible.

Here is what i'm trying to do:

const testreturn = () => {
    return h('div', { id: 'foo', innerHTML: 'hello world' }, [])
}

return () => [
    testreturn
]

If i try this, instead of seeing 'hello world' in my template, i will see the function testreturn printed out to the screen.

Instead if i try this:

return () => [
    h('div', { id: 'foo', innerHTML: 'hello world' }, [])
]

I will see a div in my template. Is there any way to accomplish what i'm trying to do in the first case?

CodePudding user response：

Wouldn't it be enough to just call the function like that?

return () => [
    testreturn()
]

This is in the end the same thing as when you include the h(...) directly in the return array. Vue won't execute a function when using it inside the template.