diff --git a/src/guide/render-function.md b/src/guide/render-function.md index a5a17a7689..e521a89dfa 100644 --- a/src/guide/render-function.md +++ b/src/guide/render-function.md @@ -567,6 +567,33 @@ render () { } ``` +## Return Values for Render Functions + +In all of the examples we've seen so far, the `render` function has returned a single root VNode. However, there are alternatives. + +Returning a string will create a text VNode, without any wrapping element: + +```js +render() { + return 'Hello world!' +} +``` + +We can also return an array of children, without wrapping them in a root node. This creates a fragment: + +```js +// Equivalent to a template of `Hello
world!` +render() { + return [ + 'Hello', + h('br'), + 'world!' + ] +} +``` + +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. + ## JSX If we're writing a lot of `render` functions, it might feel painful to write something like this: