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

12:26錯誤意外的函數表達式喜歡箭頭回調ESLint上array.map喜歡箭頭回調

我看了看地圖文檔並不能找到一個多參數的好例子。

來源

2016-04-16 azz0r

該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。

來源

2016-04-16 10:14:47 Scott

你可以重寫map這樣的：

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

鑑於顏色名稱似乎是唯一的，你可以沒有問題用它們作爲key秒。

來源

2016-04-16 09:57:33

ESLint上array.map喜歡箭頭回調

回答

相關問題