← Back to rules

react/forward-ref-uses-ref 正しさ

An auto-fix is available for this rule.

何を行うか

forwardRef でラップされたコンポーネントには ref パラメータが必須であることを要求します。
ref 引数を省略することは通常バグであり、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 />;
}

使い方

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

Config (.oxlintrc.json)

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

CLI

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

参照

• ルールのソース