ESLint首选对array.map进行箭头回调

问题描述

import React from 'react';

export default class UIColours extends React.Component {
  displayName = 'UIColours'

  render() {
    const colours = ['black', 'red', 'white', 'orange', 'green', 'yellow', 'blue', 'darkblue', 'lilac', 'purple', 'darkPurple'];
    return (
      <div className="ui-colours-container row bg-white">
        <div className="col-md-16 col-xs-16 light">
          <div className="color-swatches">
            {colours.map(function(colour, key) {
              return (
                <div key={key} className={'strong color-swatch bg-' + colour}>
                  <p>{colour}</p>
                </div>
              );
            })}
          </div>
        </div>
      </div>
   );
  }
}

我看过地图文档，找不到很好的多个参数示例.

I've looked at the map documentation and can't find a good example of multiple parameters.

推荐答案

之所以会出现ESLint规则，是因为您有一个匿名函数作为回调，因此建议您改用箭头函数.要使用带有箭头功能的多个参数，您需要在参数上加上括号，例如:

That ESLint rule occurs because you have an anonymous function as a callback, so it's suggesting that you use an arrow function instead. To use multiple parameters with arrow functions you need to wrap the parameters with parentheses, e.g.:

someArray.map(function(value, index) {
  // do something
});

someArray.map((value, index) => {
  // do something
});

与往常一样，箭头功能的MDN文档的内容非常详细解释箭头功能可以使用的变体.

As always, the MDN docs for arrow functions has a very detailed explanation of the variations that can be used with arrow functions.

或者，您可以禁用该ESLint规则或对其进行更改，以使它不会对命名回调发出警告.该ESLint规则的文档为 prefer-arrow-callback .

Alternatively, you could just disable that ESLint rule or change it so that it won't warn about named callbacks. The documentation for that ESLint rule is prefer-arrow-callback.

这篇关于ESLint首选对array.map进行箭头回调的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！