array.map 上的 ESLint 首选箭头回调答案

【问题标题】：ESLint prefer-arrow-callback on array.maparray.map 上的 ESLint 首选箭头回调
【发布时间】：2016-04-16 09:25:33
【问题描述】：

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>
   );
  }
}

12:26 错误意外的函数表达式首选箭头回调

我查看了地图文档，找不到多个参数的好示例。

【问题讨论】：

标签： javascript reactjs ecmascript-6 eslint

【解决方案1】：

该 ESLint 规则的出现是因为您有一个匿名函数作为回调，因此建议您改用箭头函数。要将多个参数与箭头函数一起使用，您需要将参数用括号括起来，例如：

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

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

与往常一样，the MDN docs for arrow functions 对可用于箭头函数的变体进行了非常详细的说明。

或者，您可以禁用该 ESLint 规则或更改它，以便它不会警告命名回调。该 ESLint 规则的文档是 prefer-arrow-callback。

【讨论】：

【解决方案2】：

你可以像这样重写map：

{colours.map(colour => (
  <div key={`colour-${colour}`} className={`strong color-swatch bg-${colour}`}>
    <p>{colour}</p>
  </div>
)}

鉴于颜色名称似乎是独一无二的，您可以毫无问题地将它们用作keys。

【讨论】：