如何使用`h`创建一个非空评论节点？

Posted 2023-02-23

【中文标题】如何使用`h`创建一个非空评论节点？

【英文标题】：How to create a non-empty comment node using `h`?

【发布时间】：2021-07-15 05:33:52

【问题描述】：

以下代码将生成一个空的注释节点，即<!---->。 如何生成非空评论节点，例如<!-- Foo --> 使用 h?

export default 
  render(h) 
    return h(null)
  ,

【参考方案1】：

选项 1：h(null) 将字符串作为第二个参数

export default 
  render(h) 
    return h(null, 'This is a comment')  // <!--This is a comment-->
  ,

选项 2：h(Comment) 将字符串作为第二个参数

import  h, Comment  from 'vue' // Vue 3

export default 
  render() 
    return h(Comment, 'This is a comment')  // <!--This is a comment-->
  ,

选项 3：createCommentVNode() 以字符串为参数

import  createCommentVNode  from 'vue' // Vue 3

export default 
  render() 
    return createCommentVNode('This is a comment')  // <!--This is a comment-->
  ,

【讨论】：

Vue 3 警告 [Vue warn]: Invalid vnode type when creating vnode: null

谢谢，看来createCommentVNode 也是discouraged。

也请看this。

是的！ Comment 完美，不打印任何警告。

<Comment>Foo</Comment> 在 JSX 中产生 <!--[object Object]--> tho，你知道如何解决这个问题吗？