如何在功能组件中呈现嵌套元素？

Question

I am figuring out how to render multiple root elements in component and functional component is the solution, things are working fine for me but just not sure how to render nested element.

Please check comment in the code where I have described what's working for me.

export default {
  name: 'MyFnlComp',
  functional: true,
  render(createElement, { props }) {
    const itemIndex = props.item.index;
    const nestedEle = createElement('div', {}, 'nested element goes here');

    const catCard = createElement('div', {}, nestedEle); // this doesn't work :(
    const userCards = createElement('div', {}, 'Hey! this works'); // this works :)

    return [catCard, userCards];
  },

};

Answer 1

createElement的最后一个参数应该是字符串或数组。

const catCard = createElement('div', {}, [nestedEle]);