ESLint prefer-arrow-обратный вызов в массиве.карта

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 ошибка неожиданное выражение функции prefer-arrow-callback

Я просмотрел документацию карты и не могу найти хороший пример нескольких параметров.

6
ecmascript-6 eslint javascript reactjs

2 ответов

это правило ESLint возникает, потому что у вас есть анонимная функция в качестве обратного вызова, поэтому предлагается использовать функцию стрелки. Чтобы использовать несколько параметров с функциями стрелок, вам нужно обернуть параметры круглыми скобками, например:

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

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

Как всегда документы MDN для функций стрелки имеет очень подробное объяснение вариаций, которые могут быть использованы с функциями стрелки.

кроме того, вы можете просто отключить это правило ESLint или измените его так, чтобы он не предупреждал об именованных обратных вызовах. Документация для этого правила ESLint -prefer-стрелка-обратный вызов.

17

вы можете переписать map такой:

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

учитывая, что названия цветов кажутся уникальными, вы можете использовать их как keyS без проблем.

1