← Back to rules

react/jsx-no-comment-textnodes 懸念

何をするか

このルールは、コメント文字列（// や /* で始まるもの）が誤って JSX 式のテキストノードとして挿入されることを防ぎます。

なぜ問題なのか

JSX では、波括弧 {} で囲まれていないすべてのテキストノードは、レンダリングされるリテラル文字列と見なされます。このため、テキストにコメントが含まれている場合、予期しない動作が発生する可能性があります。

例

このルールに対して 不正 なコードの例：

const Hello = () => {
  return <div>// 空の div</div>;
};

const Hello = () => {
  return <div>/* 空の div */</div>;
};

このルールに対して 正しい コードの例：

const Hello = () => {
  return <div>{/* 空の div */}</div>;
};

使い方

設定ファイルまたは CLI でこのルールを 有効化 するには、次のようにします：

設定 (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/jsx-no-comment-textnodes": "error"
  }
}

CLI

oxlint --deny react/jsx-no-comment-textnodes --react-plugin

参考情報

• ルールのソース