Functional Tree Components with h()

Snippet

Functional Tree Components with h()

For highly dynamic or recursive structures, templates can be restrictive. Functional components using the 'h' (hyperscript) function offer better control over render logic and slightly better performance for pure-presentational nodes without instance overhead.

snippet.js
javascript
import { h, resolveComponent } from 'vue';
 
const RecursiveTree = (props) => {
  const children = props.items.map(item => {
    return h('div', { class: 'node' }, [
      h('span', item.label),
      item.children ? h(resolveComponent('RecursiveTree'), { items: item.children }) : null
    ]);
  });
  
  return h('div', { class: 'tree-root' }, children);
};
 
RecursiveTree.props = ['items'];
export default RecursiveTree;

vue

Breakdown

h(resolveComponent('RecursiveTree'), ...)

Recursively renders the same component by resolving its name.

RecursiveTree.props = ['items']

Explicitly defines props for a functional component.

Previous snippet Next snippet

More Expert JavaScript exercises →

From your library

Functional Tree Components with h()

Related