web-dev-qa-db-ja.com

DOMオブジェクトにプロパティを設定するときにno-param-reassignを回避する方法

主な目的は、DOMオブジェクトにプロパティを設定することです

function (el) {
  el.expando = {};
}

ESLintがno-param-reassignエラーをスローするAirBnBのコードスタイルを使用します。

エラーパラメータ 'el'への割り当てno-param-reassign

AirBnBのコードスタイルを適合させながら、引数として渡されたDOMオブジェクトを操作するにはどうすればよいですか？

誰かが 別の問題 を参照して/* eslint react/prop-types: 0 */を使用することを提案しましたが、私が間違っていない場合、これは反応にうまく適用されますが、ネイティブDOM操作には適用されません。

また、コードのスタイルを変更することが答えだとは思いません。標準スタイルを使用する利点の1つは、プロジェクト全体で一貫したコードを持つことと、ルールを自由に変更することは、AirBnBのような主要なコードスタイルの誤用のように感じると思います。

記録のために、私はGitHubでAirBnBに尋ねました。彼らはこれらのケースで進むべき方法だと思います 問題＃766 。

javascriptdomeslint
65
Lukas

@Mathleticsが示唆するように、これを.eslintrc.jsonファイルに追加することで、完全に ルールを無効化 できます：

"rules": {
  "no-param-reassign": 0
}

または、paramプロパティ専用のルールを無効にすることもできます

"rules": {
  "no-param-reassign": [2, { "props": false }]
}

または、その関数のルールを無効にすることもできます

/* eslint-disable no-param-reassign */
function (el) {
  el.expando = {};
}
/* eslint-enable no-param-reassign */

またはその行のみ

function (el) {
  el.expando = {}; // eslint-disable-line no-param-reassign
}

また、AirBnBのスタイルガイドに対応するためにESLintルールを無効にすることについて、これを確認することもできます ブログ投稿 。

80
sfletche

この記事では説明しています のように、このルールは argumentsオブジェクト の変更を避けるためのものです。パラメーターに割り当てた後、argumentsオブジェクトを介していくつかのパラメーターにアクセスしようとすると、予期しない結果が生じる可能性があります。

別の変数を使用してDOM要素への参照を取得し、それを変更することで、ルールをそのまま維持し、AirBnBスタイルを維持できます。

function (el) {
  var theElement = el;
  theElement.expando = {};
}

JSオブジェクト（DOMノードを含む）は参照によって渡されるため、ここでelとtheElementは同じDOMノードへの参照ですが、arguments[0]はそのDOM要素への参照のままなので、theElementを変更してもargumentsオブジェクトは変更されません。

このアプローチは ルールのドキュメント で示唆されています：

このルールの正しいコードの例：

/*eslint no-param-reassign: "error"*/

function foo(bar) {
    var baz = bar;
}

個人的に、私は"no-param-reassign": ["error", { "props": false }]アプローチを他のいくつかの答えに言及して使用します。パラメーターのプロパティを変更しても、そのパラメーターが参照するものが変更されることはなく、このルールが回避しようとしている種類の問題に遭遇するべきではありません。

48
Useless Code

.eslintrcファイル内でこのルールをオーバーライドし、このようなparamプロパティに対して無効にすることができます

{
    "rules": {
        "no-param-reassign": [2, { 
            "props": false
        }]
    },
    "extends": "eslint-config-airbnb"
}

この方法のルールはまだアクティブですが、プロパティについては警告しません。詳細： http://eslint.org/docs/rules/no-param-reassign

20
Gyandeep

no-param-reassign警告は、一般的な関数には意味がありますが、変更しようとしている配列に対する古典的なArray.forEachループには適切ではありません。

ただし、これを回避するために、新しいオブジェクトで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
});
5
Justus Romijn

このルールを選択的に無効にする場合は、パラメータの再割り当てを無視するオブジェクト名の「ホワイトリスト」を許可するno-param-reassignルールの 提案された新しいオプション に関心があるかもしれません。

2
RH Becker

オブジェクトを変更するlodash assignInを使用することもできます。 assignIn(obj, { someNewObj });

https://lodash.com/docs/4.17.2#assignIn

0
Jazzy

データを更新するためのメソッドを使用できます。例えば。 「res.statusCode = 404」ではなく「res.status（404）」 私は解決策を見つけました。 https://github.com/eslint/eslint/issues/6505#issuecomment-2823259

/*eslint no-param-reassign: ["error", { "props": true, "ignorePropertyModificationsFor": ["$scope"] }]*/

app.controller('MyCtrl', function($scope) {
  $scope.something = true;
});
0
Viktor Antishov

ドキュメント の後に：

function (el) {
  const element = el
  element.expando = {}
}
0
Victor Santos