← Back to rules

react/forward-ref-uses-ref Correctness

💡 A suggestion is available for this rule.

它的作用

要求使用 forwardRef 包裹的组件必须有一个 ref 参数。 省略 ref 参数通常是一个 bug， 而且不使用 ref 的组件也不需要被 forwardRef 包裹。

为什么这不好？

省略 ref 参数会使 forwardRef 包装器变得多余， 并且可能导致混淆。

示例

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

var React = require("react");

var Component = React.forwardRef((props) => <div />);

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

var React = require("react");

var Component = React.forwardRef((props, ref) => <div ref={ref} />);

var Component = React.forwardRef((props, ref) => <div />);

function Component(props) {
  return <div />;
}

如何使用

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

Config (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/forward-ref-uses-ref": "error"
  }
}

Config (oxlint.config.ts)

import { defineConfig } from "oxlint";

export default defineConfig({
  plugins: ["react"],
  rules: {
    "react/forward-ref-uses-ref": "error",
  },
});

CLI

oxlint --deny react/forward-ref-uses-ref --react-plugin

版本

此规则在 v0.16.9 中添加。

参考资料

• Rule Source
• Open rule in Oxc Playground