noReactForwardRef

JavaScript (and super languages)

摘要

¥Summary

规则生效日期：v2.2.5

¥Rule available since: v2.2.5
诊断类别：lint/nursery/noReactForwardRef

¥Diagnostic Category: lint/nursery/noReactForwardRef
此规则包含 unsafe 修复程序。

¥This rule has an unsafe fix.
此规则的默认严重级别为 warning。

¥The default severity of this rule is warning.
此规则属于以下域：

¥This rule belongs to the following domains:
- react
来源：

¥Sources:
- 与 react-x/no-forward-ref 相同
  
  ¥Same as react-x/no-forward-ref
- 与 @eslint-react/no-forward-ref 相同
  
  ¥Same as @eslint-react/no-forward-ref

如何配置

¥How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noReactForwardRef": "error"
6
      }
7
    }
8
  }
9
}

描述

¥Description

将 forwardRef 的使用替换为将 ref 作为 prop 传递。

¥Replaces usages of forwardRef with passing ref as a prop.

在 React 19 中，不再需要 forwardRef 奖项。请将 ref 作为 prop 传递。此规则检测是否使用了 forwardRef API，并建议改用 ref 属性。详情请参阅官方博客文章。

¥In React 19, forwardRef is no longer necessary. Pass ref as a prop instead. This rule detects the usage of the forwardRef API, and it suggests using the prop ref instead. See the official blog post for details.

如果你使用的是 React 18 或更早版本，则应禁用此规则。

¥This rule should be disabled if you are working with React 18 or earlier.

示例

¥Examples

无效

¥Invalid

1
import { forwardRef } from "react";
2

3
const MyInput = forwardRef(function MyInput(props, ref) {
4
  return <input ref={ref} {...props} />;
5
});

code-block.jsx:3:17 lint/nursery/noReactForwardRef  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ Use of forwardRef is detected, which is deprecated.
  
    1 │ import { forwardRef } from “react”;
    2 │ 
  > 3 │ const MyInput = forwardRef(function MyInput(props, ref) {
      │                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 4 │   return <input ref={ref} {…props} />;
  > 5 │ });
      │ ^^
    6 │ 
  
  ℹ In React 19, ‘forwardRef’ is no longer necessary. Pass ‘ref’ as a prop instead.
  
  ℹ Replace the use of forwardRef with passing ref as a prop.
  
  ℹ Unsafe fix: Remove the forwardRef() call and receive the ref as a prop.
  
    1 1 │   import { forwardRef } from “react”;
    2 2 │   
    3   │ - const·MyInput·=·forwardRef(function·MyInput(props,·ref)·{
      3 │ + const·MyInput·=·function·MyInput({·ref,·...props·})·{
    4 4 │     return <input ref={ref} {…props} />;
    5   │ - });
      5 │ + };
    6 6 │

1
import { forwardRef } from "react";
2

3
const MyInput = forwardRef((props, ref) => {
4
  return <input ref={ref} {...props} />;
5
});

code-block.jsx:3:17 lint/nursery/noReactForwardRef  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ Use of forwardRef is detected, which is deprecated.
  
    1 │ import { forwardRef } from “react”;
    2 │ 
  > 3 │ const MyInput = forwardRef((props, ref) => {
      │                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 4 │   return <input ref={ref} {…props} />;
  > 5 │ });
      │ ^^
    6 │ 
  
  ℹ In React 19, ‘forwardRef’ is no longer necessary. Pass ‘ref’ as a prop instead.
  
  ℹ Replace the use of forwardRef with passing ref as a prop.
  
  ℹ Unsafe fix: Remove the forwardRef() call and receive the ref as a prop.
  
    1 1 │   import { forwardRef } from “react”;
    2 2 │   
    3   │ - const·MyInput·=·forwardRef((props,·ref)·=>·{
      3 │ + const·MyInput·=·({·ref,·...props·})·=>·{
    4 4 │     return <input ref={ref} {…props} />;
    5   │ - });
      5 │ + };
    6 6 │

有效

¥Valid

1
function MyInput({ ref, ...props }) {
2
  return <input ref={ref} {...props} />;
3
}

1
const MyInput = ({ ref, ...props }) => {
2
  return <input ref={ref} {...props} />;
3
}

noReactForwardRef

摘要

如何配置

描述

示例

无效

有效

相关链接