How can you write duplicate virtual nodes in a component?
All virtual nodes(VNodes) in the component tree must be unique.i.e, You can’t write duplicated nodes in a straightforward way. If you want to duplicate the same element/component many times then you should use factory function.
The below render function is invalid where you are trying to duplicate h1 element 3 times:
1 2 3 4 5 6 | render: function (createElement) { var myHeadingVNode = createElement('h1', 'This is a Virtual Node') return createElement('div', [ myHeadingVNode, myHeadingVNode, myHeadingVNode ]) } |
You can make duplicates with factory function:
1 2 3 4 5 6 7 | render: function (createElement) { return createElement('div', Array.apply(null, { length: 3 }).map(function () { return createElement('h1', 'This is a Virtual Node') }) ) } |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
