35 lines
1.0 KiB
Plaintext
35 lines
1.0 KiB
Plaintext
JSX is a special JavaScript syntax allowing to easily write HTML together with JavaScript when using React framework.
|
|
Adding comments inside JSX might be tricky as JSX code is neither a plain HTML nor JavaScript.
|
|
It's not allowed to use HTML comment syntax (`<!-- ... -\->`), it will make the parsing fail.
|
|
And using JavaScript style comments, single or multiline, will create an additional text node in the browser, which is probably not expected.
|
|
To avoid that use JavaScript multiline comments enclosed in the curly braces.
|
|
Note that JavaScript comments are also allowed next to the attributes (`<div /* comment */>`).
|
|
|
|
However if the additional text node is intentional, prefer using a JavaScript string literal containing that comment.
|
|
|
|
== Noncompliant Code Example
|
|
|
|
[source,javascript]
|
|
----
|
|
<div>
|
|
// nothing here
|
|
</div>
|
|
----
|
|
|
|
== Compliant Solution
|
|
|
|
[source,javascript]
|
|
----
|
|
<div>
|
|
{ /* nothing here */ }
|
|
</div>
|
|
----
|
|
|
|
When text node is intentional:
|
|
[source,javascript]
|
|
----
|
|
<div>
|
|
{ '// nothing here' }
|
|
</div>
|
|
----
|