vue3使用render函数渲染标签或组件

 场景是这样的：

使用naiveUI的<n-auto-complete>组件的下拉中需要动态渲染自定义的样式，
所以要使用到:render-label属性

•  渲染普通的标签 div span，以下为单个或多个标签的方式

const renderLabel = (option: SelectOption): VNodeChild => {
    return h(
      'div',
      {
        style: {
          display: 'flex',
          alignItems: 'center',
          paddingLeft: '10px',
        },
      },
      [
        h('img', {
          src: option?.iconPath,
          round: true,
          size: 'small',
          // 添加事件
          onClick: () => {
            console.log('点击')
          },
        }),
        h(
          'div',
          {
            style: {
              marginLeft: '12px',
              padding: '4px 0',
            },
          },
          [h('div', null, [option?.name as string])],
        ),
      ],
    )
}

• 渲染组件标签

const renderLabel = (option: SelectOption): VNodeChild => {
    return h(
      NEllipsis,
      {
        style: {
          maxWidth: '205px',
        },
      },
      [option?.label as string],
    )
}

这种写法虽然展示没问题，但console中会出现警告提示：

可修改为：（返回一个函数）
 

return h(
    NEllipsis,
      {
        style: {
          maxWidth: '100%',
        },
      },
      // 这里需返回一个函数
      () => [option?.label as string],
    )

 好啦 祝大家什么bug都能解决~