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 规则之所以出现,是因为您有一个匿名函数作为回调,因此建议您改用箭头函数。要将多个参数与箭头函数一起使用,您需要用括号将参数括起来,例如:
someArray.map(function(value, index) {
// do something
});
someArray.map((value, index) => {
// do something
});
与往常一样,箭头函数的 MDN 文档对可用于箭头函数的变体进行了非常详细的解释。
或者,您可以禁用该 ESLint 规则或对其进行更改,以便它不会警告命名回调。该 ESLint 规则的文档是首选箭头回调。
您可以
像这样重写map
:
{colours.map(colour => (
<div key={`colour-${colour}`} className={`strong color-swatch bg-${colour}`}>
<p>{colour}</p>
</div>
)}
鉴于颜色名称似乎是唯一的,您可以毫无问题地将它们用作key
。