← Back to rules

react/jsx-no-comment-textnodes 可疑

它的作用

此规则防止注释字符串（例如以 // 或 /* 开头）意外作为文本节点注入到 JSX 语句中。

为什么这是个问题？

在 JSX 中，任何未用大括号包裹的文本节点都被视为要渲染的字面量字符串。当这些文本包含注释时，可能会导致意外行为。

示例

以下为 错误 的代码示例：

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

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

以下为 正确 的代码示例：

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

如何使用

要通过配置文件或 CLI 启用 此规则，可以使用：

配置文件 (.oxlintrc.json)

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

CLI

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

参考资料

• 规则源码