Skip to content

Commit da874b2

Browse files
docs: return values for render functions (#1006)
1 parent 0f25a8d commit da874b2

File tree

1 file changed

+27
-0
lines changed

1 file changed

+27
-0
lines changed

src/guide/render-function.md

+27
Original file line numberDiff line numberDiff line change
@@ -567,6 +567,33 @@ render () {
567567
}
568568
```
569569

570+
## Return Values for Render Functions
571+
572+
In all of the examples we've seen so far, the `render` function has returned a single root VNode. However, there are alternatives.
573+
574+
Returning a string will create a text VNode, without any wrapping element:
575+
576+
```js
577+
render() {
578+
return 'Hello world!'
579+
}
580+
```
581+
582+
We can also return an array of children, without wrapping them in a root node. This creates a fragment:
583+
584+
```js
585+
// Equivalent to a template of `Hello<br>world!`
586+
render() {
587+
return [
588+
'Hello',
589+
h('br'),
590+
'world!'
591+
]
592+
}
593+
```
594+
595+
If a component needs to render nothing, perhaps because data is still loading, it can just return `null`. This will be rendered as a comment node in the DOM.
596+
570597
## JSX
571598

572599
If we're writing a lot of `render` functions, it might feel painful to write something like this:

0 commit comments

Comments
 (0)