noReactPropAssignments

JSX and TSX

摘要

¥Summary

规则生效日期：v2.0.0

¥Rule available since: v2.0.0
诊断类别：lint/correctness/noReactPropAssignments

¥Diagnostic Category: lint/correctness/noReactPropAssignments
此规则没有修复方案。

¥This rule doesn’t have a fix.
此规则的默认严重级别为 information。

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

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

¥Sources:
- 与 react-hooks/react-compiler 相同
  
  ¥Same as react-hooks/react-compiler

如何配置

¥How to configure

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

描述

¥Description

禁止向 React 组件赋值 props。

¥Disallow assigning to React component props.

React 的 props 被认为是不可变的，给 props 对象的属性赋值被认为是不好的做法。使用 React 编译器时，这甚至会是一个硬性错误。

¥React’s props are assumed to be immutable, and it is considered bad practice to assign to properties of the props object. When using the React Compiler, this is even a hard error.

示例

¥Examples

无效

¥Invalid

1
function Foo(props) {
2
  props.bar = "Hello " + props.bar;
3

4
  return <div>{props.bar}</div>
5
}

code-block.jsx:2:2 lint/correctness/noReactPropAssignments ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Mutating component props is not allowed.
  
    1 │ function Foo(props) {
  > 2 │ 	props.bar = “Hello ” + props.bar;
      │ 	^^^^^
    3 │ 
    4 │ 	return <div>{props.bar}</div>
  
  ℹ Consider using a local variable instead.

有效

¥Valid

1
const Foo = function({bar}) {
2
   bar = "Hello " + bar;
3
   return <div>{bar}</div>
4
 }

noReactPropAssignments

摘要

如何配置

描述

示例

无效

有效

相关链接