React JSX コメントを書きたい！

ReactのJSXでコメントを書く方法のメモ

JSX Comment

JSXの{ }の中はJavaScriptが動作するので{ }で囲ってコメントを書くことができる

{/*  一行コメント */}

{/*
  複数行
  コメント
*/}

// も使えるが{ }の閉じタグの前に改行が必要。

{// 一行コメント
}

改行がないと、最後の}もコメントアウトされてエラーになる

{// 一行コメント}
// => Parsing error: Unexpected token

JSXの{/**/}コメントアウトはHTML側には出力されない

render(
  <p>コメントアウトは
    {/* ばーかばーか！ */}
    HTMLには
    {/*
      ウェーイwwww
      べろべろゔぁあー ⁽⁽ଘ(｡•ө•｡)ଓ⁾⁾
    */}
     出力されない
  </p>
);

👇

<p>
  コメントアウトは
  HTMLには
  出力されない
</p>

<!-- --> HTMLコメントアウトの出力

JSX上だけにコメントをするのは上記の方法で可能ですが、HTMLコメントを出力するのは少し大変でした。(必要性があるのか？という部分は置いておいて

直接<!-- --> を書くとエラー

render(
<div>
  <!-- comment -->
</div>
);
// => Parsing error: Unexpected token

{<!-- -->}もエラー

render(
<div>
  {<!-- comment -->}
</div>
);
// => Parsing error: Unexpected token

{"<!-- -->"}はエスケープされて文字列として出力される。変数にしても同じ

const comment = "<!-- comment -->";
render(
<div>
  {<!-- comment -->}
  {comment}
</div>
);
// 👇
<div>
  &lt;!-- comment --&gt;
  &lt;!-- comment --&gt;
</div>

dangerouslySetInnerHTML={{__html: ""}} を使う

dangerouslySetInnerHTML={{__html: ""}}という構文をDOMエレメントにつければ、そのnode内に__htmlの値が出力されるようです。

render(
  <div dangerouslySetInnerHTML={{__html: '<!-- comment -->'}} />
)

👇

<div>
  <!-- comment -->
</div>

※ dangerouslySetInnerHTMLを使う際はnode内に要素を記述できないので表示したい要素全てを__htmlの値に渡す必要がある

render(
  <div dangerouslySetInnerHTML={{__html: '<!-- comment -->'}}>
    HTML Comment is here!
  </div>
);
// => Can only set one of `children` or `props.dangerouslySetInnerHTML`.

React.FragmentにdangerouslySetInnerHTMLでコメントを付けても出力されない

単にコメントを入れたいだけならReact.Fragment使えばできそうと思ったのですが、出力されませんでした。

render(
  <React.Fragment
    dangerouslySetInnerHTML={{__html: '<p>comment?</p><!-- fragment comment -->'}}
  />
);

👇

React.Fragmentそのものは出力されないからDOMを出力後にdangerouslySetInnerHTMLの値をセットするのとができないのからなのかな？と思いました。

e. g.

See the Pen React Comment by KIKIKI (@chaika-design) on CodePen.

---

[参考]

• Babel, JSX, and Build Steps – React
• Conditional ie comments in react.js - Notes of Maks Nemisj
• DOM Elements – React
• React の dangerouslySetInnerHTML を使用する際に最低限気にするべきこと - Qiita

コメントする力