[英]How to avoid no-param-reassign when setting a property on a DOM object
I have a method which's main purpose is to set a property on a DOM object我有一个主要目的是在 DOM 对象上设置属性的方法
function (el) {
el.expando = {};
}
I use AirBnB's code style which makes ESLint throw a no-param-reassign
error:我使用 AirBnB 的代码风格,这使得 ESLint 抛出
no-param-reassign
错误:
error Assignment to function parameter 'el' no-param-reassign
错误分配给函数参数 'el' no-param-reassign
How can I manipulate a DOM object passed as an argument while conforming AirBnB's code style?如何在符合 AirBnB 的代码风格的同时操作作为参数传递的 DOM 对象?
Somebody suggested to use /* eslint react/prop-types: 0 */
referring to another issue but if I am not mistaken this applies well for react, but not for native DOM manipulation.有人建议使用
/* eslint react/prop-types: 0 */
指的是另一个问题,但如果我没记错的话,这适用于 react,但不适用于原生 DOM 操作。
Also I do not think changing the code style is an answer.我也不认为改变代码风格是一个答案。 I believe one of the benefits of using a standard style is having consistent code across projects and changing the rules at will feels like a misuse of a major code style like AirBnB's.
我相信使用标准风格的好处之一是在项目中拥有一致的代码,随意更改规则感觉就像滥用了像 AirBnB 这样的主要代码风格。
For the record, I asked AirBnB on GitHub, what they think is the way to go in these cases in issue #766 .作为记录,我在 GitHub 上询问了 AirBnB,他们认为在 issue #766中这些情况下的方法是什么。
As @Mathletics suggests, you candisable the rule entirely by adding this to your .eslintrc.json
file:正如@Mathletics 所建议的,您可以通过将其添加到您的
.eslintrc.json
文件中来完全禁用该规则:
"rules": {
"no-param-reassign": 0
}
Or you could disable the rule specifically for param properties或者您可以禁用专门针对 param 属性的规则
"rules": {
"no-param-reassign": [2, { "props": false }]
}
Alternatively, you could disable the rule for that function或者,您可以禁用该功能的规则
/* eslint-disable no-param-reassign */
function (el) {
el.expando = {};
}
/* eslint-enable no-param-reassign */
Or for that line only或仅针对该行
function (el) {
el.expando = {}; // eslint-disable-line no-param-reassign
}
As this article explains , this rule is meant to avoid mutating the arguments
object .正如本文所解释的,此规则旨在避免改变
arguments
对象。 If you assign to a parameter and then try and access some of the parameters via the arguments
object, it can lead to unexpected results.如果您分配给一个参数,然后尝试通过
arguments
对象访问某些参数,则可能会导致意外结果。
You could keep the rule intact and maintain the AirBnB style by using another variable to get a reference to the DOM element and then modify that:您可以通过使用另一个变量来获取对 DOM 元素的引用,然后对其进行修改,从而保持规则不变并保持 AirBnB 样式:
function (el) {
var theElement = el;
theElement.expando = {};
}
In JS objects (including DOM nodes) are passed by reference, so here el
and theElement
are references to the same DOM node, but modifying theElement
doesn't mutate the arguments
object since arguments[0]
remains just a reference to that DOM element.在 JS 中对象(包括 DOM 节点)是通过引用传递的,所以这里
el
和theElement
是对同一个 DOM 节点的引用,但是修改theElement
不会改变arguments
对象,因为arguments[0]
仍然只是对该 DOM 元素的引用。
This approach is hinted at in the documentation for the rule :规则文档中暗示了这种方法:
Examples of correct code for this rule:
此规则的正确代码示例:
/*eslint no-param-reassign: "error"*/
function foo(bar) {
var baz = bar;
}
Personally, I would just use the "no-param-reassign": ["error", { "props": false }]
approach a couple of other answers mentioned.就个人而言,我只会使用
"no-param-reassign": ["error", { "props": false }]
方法来解决提到的其他几个答案。 Modifying a property of the parameter doesn't mutate what that parameter refers to and shouldn't run into the kinds of problems this rule is trying to avoid.修改参数的属性不会改变该参数所指的内容,也不应该遇到此规则试图避免的问题。
You can override this rule inside your .eslintrc
file and disable it for param properties like this您可以在
.eslintrc
文件中覆盖此规则,并为这样的 param 属性禁用它
{
"rules": {
"no-param-reassign": [2, {
"props": false
}]
},
"extends": "eslint-config-airbnb"
}
This way rule is still active but it will not warn for properties.这种方式规则仍然有效,但不会对属性发出警告。 More info: http://eslint.org/docs/rules/no-param-reassign
更多信息: http : //eslint.org/docs/rules/no-param-reassign
The no-param-reassign
warning makes sense for common functions, but for a classic Array.forEach
loop over an array which you intend to mutate it isn't to appropriate. no-param-reassign
警告对于常见函数是有意义的,但对于经典的Array.forEach
循环,你打算改变它是不合适的。
However, to get around this, you can also use Array.map
with a new object (if you are like me, dislike snoozing warnings with comments):但是,为了解决这个问题,您还可以将
Array.map
与一个新对象一起使用(如果您像我一样,不喜欢带有注释的暂停警告):
someArray = someArray.map((_item) => {
let item = Object.assign({}, _item); // decouple instance
item.foo = "bar"; // assign a property
return item; // replace original with new instance
});
function (el) {
el.setAttribute('expando', {});
}
Everything else is just ugly hacks.其他一切都只是丑陋的黑客。
Following the documentation :按照文档:
function (el) {
const element = el
element.expando = {}
}
An updated alternative if you don't really want to disable the rule, could be something like:如果您真的不想禁用规则,则更新的替代方案可能是这样的:
function (el) {
Object.defineProperty(el, 'expando',{
value: {},
writable: true,
configurable: true,
enumerable: true
});
}
Reference : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty参考: https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
You can also use lodash assignIn
which mutates the object.您还可以使用 lodash
assignIn
来改变对象。 assignIn(obj, { someNewObj });
https://lodash.com/docs/4.17.2#assignIn https://lodash.com/docs/4.17.2#assignIn
You can use methods for updating data.您可以使用方法来更新数据。 Eg.例如。 "res.status(404)" instead of "res.statusCode = 404" I found the solution. “res.status(404)”而不是“res.statusCode = 404”我找到了解决方案。 https://github.com/eslint/eslint/issues/6505#issuecomment-282325903 https://github.com/eslint/eslint/issues/6505#issuecomment-282325903
/*eslint no-param-reassign: ["error", { "props": true, "ignorePropertyModificationsFor": ["$scope"] }]*/
app.controller('MyCtrl', function($scope) {
$scope.something = true;
});
Based on the documentation at eslint ( https://eslint.org/docs/2.0.0/rules/no-param-reassign ), I solved it using the below written configuration in the .eslintrc.js
file.根据 eslint ( https://eslint.org/docs/2.0.0/rules/no-param-reassign ) 上的文档,我使用
.eslintrc.js
文件中的以下书面配置解决了它。
rules: {
"no-param-reassign": [2, {"props": false}]
},
You can use:您可以使用:
(param) => {
const data = Object.assign({}, param);
data.element = 'some value';
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.