← Back to rules

react/jsx-no-duplicate-props 正确性

它的作用

此规则防止在 JSX 元素中出现重复的属性。

为什么这是问题？

在 JSX 元素中存在重复属性很可能是一个错误。
使用重复属性创建 JSX 元素可能导致应用程序出现意外行为。

示例

此规则的 错误 代码示例：

<App a a />;
<App foo={2} bar baz foo={3} />;

此规则的 正确 代码示例：

<App a />;
<App bar baz foo={3} />;

与 eslint-plugin-react 的差异

此规则不支持 ignoreCase 选项。不同大小写的属性被视为不同的属性，不会被标记为重复（例如 <App foo Foo /> 是允许的）。这是有意为之的设计，因为 JSX 中的属性是区分大小写的。

如何使用

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

配置文件 (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/jsx-no-duplicate-props": "error"
  }
}

CLI

oxlint --deny react/jsx-no-duplicate-props --react-plugin

参考资料

• 规则源码