How to create a non-empty comment node using JSX?

Question

I've tried the following with no luck, wanted to produce a  comment node:

export default { render() { return ( <strong> Foo {/* Baz */} </strong> ) }, }

@3r1c Produce a  comment node in the DOM tree, trailing comma is a preference thing. — Wenfang Du
– Wenfang Du, Commented Apr 21, 2021 at 6:09

Wenfang Du · Accepted Answer · 2021-05-08 12:31:33Z

Although it's not strictly JSX, I haven't better way to achieve this:

import { Comment, h } from 'vue' export default { render() { return ( <strong> Foo {h(Comment, 'Baz')} </strong> ) }, }

matt.miao · Accepted Answer · 2021-04-21 06:33:41Z

-1

This works <-- Baz -->

answer 2:

Babel transform will remove jsx comments,you can update your babel version, view this answer or you can use some hack

answered Apr 21, 2021 at 6:02

244 bronze badges

2 Comments

That's not a comment node tho.

Babel transform will remove jsx comments,you can update your babel version, view this answer or you can use some hack