← Back to rules

react/jsx-no-duplicate-props Correctness

An auto-fix is available for this rule.

它的作用

此规则可防止 JSX 元素中出现重复的 props。

为什么这不好？

在 JSX 元素中存在重复的 props 很可能是一个错误。 使用重复 props 创建 JSX 元素可能会导致应用中的意外行为。

示例

以下是此规则的错误代码示例：

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

以下是此规则的正确代码示例：

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

与 eslint-plugin-react 的区别

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

如何使用

To enable this rule using the config file or in the CLI, you can use:

Config (.oxlintrc.json)

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

Config (oxlint.config.ts)

import { defineConfig } from "oxlint";

export default defineConfig({
  plugins: ["react"],
  rules: {
    "react/jsx-no-duplicate-props": "error",
  },
});

CLI

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

版本

此规则在 v0.0.14 中添加。

参考资料

• Rule Source
• Open rule in Oxc Playground